PHP与AJAX实现无刷新待办事项删除教程

<!-- 假设在您的PHP文件中 (例如 index.php 或 todo_list.php) -->
<!-- 这是一个待办事项列表的简化结构 -->
<ul id="todo-list">
    <?php
    // 假设 $tasks 是从数据库查询出来的待办事项数组
    // 示例数据：
    // $tasks = [
    //     ['id' => 1, 'name' => '学习PHP AJAX', 'date' => '2023-10-26'],
    //     ['id' => 2, 'name' => '完成项目报告', 'date' => '2023-10-27'],
    //     ['id' => 3, 'name' => '购买食材', 'date' => '2023-10-28']
    // ];

    foreach ($tasks as $task) {
        $id = htmlspecialchars($task['id']);
        $name = htmlspecialchars($task['name']);
        $date = htmlspecialchars($task['date']);
    ?>
    <li class="task-item-<?php echo $id; ?>">
        <span><?php echo $date; ?></span>
        <span><?php echo $name; ?></span>
        <!-- 删除按钮，其ID与任务ID绑定 -->
        <a href="#" class="btn-delete-task" id="<?php echo $id; ?>">X</a>
    </li>
    <?php
    }
    ?>
</ul>

<!-- 确保在页面底部引入jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        // 使用事件委托，为动态添加的元素也能绑定事件
        // 监听所有具有 'btn-delete-task' 类的元素的点击事件
        $(document).on('click', '.btn-delete-task', function(e) {
            e.preventDefault(); // 阻止<a>标签的默认跳转行为

            var taskId = $(this).attr("id"); // 获取点击按钮的ID，即任务ID

            if (confirm("确定要删除此任务吗？")) {
                // 发送AJAX请求
                $.ajax({
                    type: "POST", // 使用POST方法发送数据，更适合删除操作
                    url: "task_delete.php", // 处理删除请求的PHP脚本路径
                    data: { id: taskId }, // 将任务ID作为数据发送到服务器
                    cache: false, // 禁用浏览器缓存

                    success: function(response) {
                        // 请求成功回调函数
                        // 假设后端成功删除后返回成功状态，或者直接不返回内容
                        // 这里我们直接根据taskId移除前端元素
                        $('.task-item-' + taskId).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
// task_delete.php

// 引入数据库连接文件
// 假设 database.php 中包含一个 PDO 数据库连接对象 $database
include 'database.php';

// 设置响应头为JSON，尽管这里不强制返回JSON，但这是一个好习惯
header('Content-Type: application/json');

// 检查请求方法是否为POST，并检查ID是否存在
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id'])) {
    $taskId = $_POST['id'];

    // 验证 $taskId 是否为有效的整数，增加安全性
    if (!filter_var($taskId, FILTER_VALIDATE_INT)) {
        http_response_code(400); // Bad Request
        echo json_encode(['status' => 'error', 'message' => '无效的任务ID']);
        exit;
    }

    try {
        // 使用预处理语句防止SQL注入
        $stmt = $database->prepare("DELETE FROM tasks WHERE task_id = :id");
        // 绑定参数，并明确指定参数类型为整数
        $stmt->bindParam(':id', $taskId, PDO::PARAM_INT);

        if ($stmt->execute()) {
            // 删除成功
            http_response_code(200); // OK
            echo json_encode(['status' => 'success', 'message' => '任务删除成功']);
        } else {
            // 删除失败 (例如，ID不存在或数据库操作失败)
            http_response_code(500); // Internal Server Error
            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 {
    // 无效请求 (非POST请求或缺少ID参数)
    http_response_code(400); // Bad Request
    echo json_encode(['status' => 'error', 'message' => '无效的请求或缺少任务ID参数。']);
}
?>

<?php
// database.php

$host = 'localhost'; // 数据库主机名
$db   = 'your_database_name'; // 您的数据库名
$user = 'your_username'; // 数据库用户名
$pass = 'your_password'; // 数据库密码
$charset = 'utf8mb4'; // 字符集

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, // 错误模式：抛出异常
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       // 默认获取模式：关联数组
    PDO::ATTR_EMULATE_PREPARES   => false,                  // 禁用模拟预处理，使用原生预处理
];

try {
    $database = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    // 数据库连接失败，记录错误并终止脚本
    error_log("数据库连接失败: " . $e->getMessage());
    die("数据库连接失败，请稍后再试。");
}
?>