使用AJAX在PHP中实现无刷新待办事项删除功能

<!-- 确保您的文件保存为.php，以便PHP代码能够执行 -->
<!-- 示例：在一个表格中显示待办事项 -->
<?php 
// 假设 $row_task['task_id'] 包含任务的唯一ID
// 假设 $row_task['task_name'] 包含任务的名称
$id = $row_task['task_id']; 
?>
<tr class="delete_task_row_<?php echo $id; ?>">
    <td><?php echo htmlspecialchars($row_task['task_name']); ?></td>
    <td>
        <!-- 删除按钮，其ID属性设置为任务的唯一ID -->
        <a href="#" class="btn btn-danger delete-btn" data-id="<?php echo $id; ?>">删除</a>
    </td>
</tr>

<!-- 如果是无序列表，结构可能如下： -->
<!--
<li class="delete_task_item_<?php echo $id; ?>">
    <span><?php echo htmlspecialchars($row_task['task_name']); ?></span>
    <a href="#" class="btn btn-danger delete-btn" data-id="<?php echo $id; ?>">X</a>
</li>
-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // 监听所有具有 'delete-btn' 类的元素的点击事件
        $('.delete-btn').click(function(e) {
            e.preventDefault(); // 阻止默认的链接跳转行为

            var id = $(this).data("id"); // 获取按钮的 data-id 属性值
            var $thisButton = $(this); // 缓存当前点击的按钮，以便后续使用

            if (confirm("您确定要删除此任务吗？")) {
                $.ajax({
                    type: "POST", // 使用POST方法发送数据，更安全且适合修改操作
                    url: "task_delete.php", // 后端处理删除请求的PHP脚本
                    data: { id: id }, // 将任务ID作为数据发送
                    cache: false, // 禁用浏览器缓存
                    success: function(response) {
                        // 请求成功后的回调函数
                        // 假设后端成功删除后，我们可以直接在前端移除对应元素
                        // 根据HTML结构，找到包含该任务的父元素并淡出
                        $(".delete_task_row_" + id).fadeOut('slow', function() {
                            $(this).remove(); // 淡出完成后从DOM中彻底移除
                        });
                        // 可以在这里添加其他成功提示，例如：
                        // alert("任务删除成功！");
                    },
                    error: function(xhr, status, error) {
                        // 请求失败时的回调函数
                        alert("删除失败，请稍后再试。错误信息：" + error);
                        console.error("AJAX Error:", status, error, xhr.responseText);
                    }
                });
            } else {
                return false; // 用户取消删除操作
            }
        });
    });
</script>

<?php
// 1. 引入数据库连接文件
// 确保您的 database.php 包含了安全的数据库连接代码
// 例如使用PDO连接：
// try {
//     $database = new PDO('mysql:host=localhost;dbname=your_database_name', 'username', 'password');
//     $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// } catch (PDOException $e) {
//     echo "数据库连接失败: " . $e->getMessage();
//     exit();
// }
include 'database.php'; // 假设您的数据库连接对象名为 $database

// 2. 获取从AJAX请求发送过来的任务ID
// 注意：前端使用POST方法发送数据，所以这里应该使用 $_POST
if (isset($_POST['id']) && !empty($_POST['id'])) {
    $id = $_POST['id'];

    // 3. 构建并执行SQL删除查询
    // 重要：为了防止SQL注入，务必使用预处理语句
    try {
        $stmt = $database->prepare("DELETE FROM tasks WHERE task_id = :id");
        $stmt->bindParam(':id', $id, PDO::PARAM_INT); // 绑定参数，指定类型为整数
        $stmt->execute();

        // 检查删除是否成功（可选，取决于您的需求）
        if ($stmt->rowCount() > 0) {
            // 删除成功，可以返回一个成功状态码或消息
            http_response_code(200); // OK
            echo json_encode(['status' => 'success', 'message' => '任务删除成功']);
        } else {
            // 没有找到匹配的记录进行删除
            http_response_code(404); // Not Found
            echo json_encode(['status' => 'error', 'message' => '未找到要删除的任务']);
        }
    } catch (PDOException $e) {
        // 数据库操作失败
        http_response_code(500); // Internal Server Error
        echo json_encode(['status' => 'error', 'message' => '数据库操作失败: ' . $e->getMessage()]);
    }
} else {
    // ID参数缺失或无效
    http_response_code(400); // Bad Request
    echo json_encode(['status' => 'error', 'message' => '无效的任务ID']);
}
?>