实现前端交互：J*aScript (jQuery & Ajax)

接下来，我们将使用jQuery来监听删除按钮的点击事件，并通过Ajax发送异步请求到后端PHP脚本。

将以下J*aScript代码添加到您的index.php文件的

TTSMaker是一个免费的文本转语音工具，提供语音生成服务，支持多种语言。

<script type="text/j*ascript">
    $(document).ready(function() {
        // 监听所有具有 'delete-btn' 类的按钮的点击事件
        $('#todo-list').on('click', '.delete-btn', function() {
            var id = $(this).data("id"); // 从data-id属性获取任务ID

            // 弹出确认对话框，提升用户体验
            if (confirm("您确定要删除此任务吗？")) {
                $.ajax({
                    type: "POST", // 使用POST方法发送数据
                    url: "task_delete.php", // 后端处理删除请求的PHP脚本
                    data: { id: id }, // 将任务ID作为数据发送
                    cache: false, // 禁用缓存
                    success: function(response) {
                        // 请求成功后，根据后端返回的响应（如果需要）或直接移除前端元素
                        // 这里我们假设后端成功删除后不会返回特定内容，直接移除前端元素
                        // 使用fadeOut动画平滑地隐藏并移除任务项
                        $(".delete_task_" + id).fadeOut('slow', function() {
                            $(this).remove(); // 动画完成后从DOM中彻底移除
                        });
                    },
                    error: function(xhr, status, error) {
                        // 处理请求失败的情况
                        alert("删除失败，请稍后再试。错误信息：" + error);
                        console.error("Ajax error:", status, error);
                    }
                });
            } else {
                return false; // 用户取消删除
            }
        });
    });
</script>

代码解析：

• $(document).ready(): 确保DOM加载完成后再执行J*aScript代码。
• $('#todo-list').on('click', '.delete-btn', function() { ... }): 这是一个事件委托的用法。它监听#todo-list元素的点击事件，并只对其中匹配.delete-btn选择器的子元素触发回调函数。这种方式对于动态添加的元素也有效。
• var id = $(this).data("id");: 获取当前点击的删除按钮上data-id属性的值，即任务ID。
• confirm(): 在执行删除操作前，向用户显示一个确认对话框。
• $.ajax(): 发送异步HTTP请求的核心方法。
  • type: "POST": 指定HTTP请求方法为POST。
  • url: "task_delete.php": 指定处理请求的后端PHP脚本路径。
  • data: { id: id }: 以键值对的形式发送数据，这里将任务ID发送给后端。
  • success: function(response) { ... }: 当Ajax请求成功完成时执行的回调函数。
    • $(".delete_task_" + id).fadeOut('slow', function() { $(this).remove(); });: 通过jQuery选择器选中对应的任务
    • 元素，使用fadeOut动画使其平滑消失，并在动画完成后从DOM中移除该元素，从而实现无刷新删除的视觉效果。

处理后端逻辑：PHP与MySQL

现在，我们需要创建一个PHP脚本（task_delete.php）来接收前端发送的任务ID，并执行数据库删除操作。

创建一个名为task_delete.php的文件，内容如下：

<?php
// task_delete.php

// 引入数据库连接文件
// 确保您的database.php文件包含正确的数据库连接代码
// 示例：$database = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');
include('database.php'); 

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

    // 验证ID是否为数字，防止非预期输入
    if (!is_numeric($id)) {
        http_response_code(400); // Bad Request
        echo "无效的任务ID。";
        exit();
    }

    try {
        // 构建SQL删除语句
        // **重要：使用预处理语句防止SQL注入攻击**
        $stmt = $database->prepare("DELETE FROM tasks WHERE task_id = :id");
        $stmt->bindParam(':id', $id, PDO::PARAM_INT); // 绑定参数，确保类型安全

        // 执行SQL语句
        if ($stmt->execute()) {
            http_response_code(200); // OK
            echo "任务删除成功。";
        } else {
            http_response_code(500); // Internal Server Error
            echo "任务删除失败。";
            // 可以在这里记录详细的错误日志
        }
    } catch (PDOException $e) {
        http_response_code(500); // Internal Server Error
        echo "数据库操作错误：" . $e->getMessage();
        // 记录异常信息
    }
} else {
    http_response_code(400); // Bad Request
    echo "无效的请求。";
}
?>

代码解析：

• include('database.php');: 引入您的数据库连接文件。database.php应该包含建立数据库连接的代码，例如使用PDO。
• if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id'])): 严格检查请求方法是否为POST，并确认id参数是否存在。这是基本的安全和请求验证。
• $id = $_POST['id'];: 从POST请求中获取前端传递的任务ID。注意：这里与原始答案中的$_GET不同，因为前端Ajax请求使用的是POST方法。
• if (!is_numeric($id)): 对接收到的ID进行基本验证，确保它是一个数字，避免处理恶意或无效的输入。
• SQL注入防护（非常重要）:
  • $stmt = $database->prepare("DELETE FROM tasks WHERE task_id = :id");: 使用PDO的预处理语句。:id`是一个占位符。
  • $stmt->bindParam(':id', $id, PDO::PARAM_INT);: 将变量$id绑定到占位符:id，并明确指定其为整数类型。这能有效防止SQL注入攻击，因为数据库会区分代码和数据。
• $stmt->execute(): 执行预处理后的SQL语句。
• http_response_code(): 设置HTTP响应状态码，以便前端可以根据状态码判断操作是否成功。
• try...catch (PDOException $e): 捕获并处理数据库操作可能发生的异常，提高程序的健壮性。

注意事项与最佳实践

1. 安全性（SQL注入）: 如上所示，务必使用预处理语句（Prepared Statements）来执行数据库查询，尤其是在SQL语句中包含用户输入时。直接拼接字符串来构建SQL查询是极其危险的，容易遭受SQL注入攻击。
2. 错误处理与用户反馈:
   • 后端PHP脚本应返回适当的HTTP状态码（例如，成功返回200 OK，失败返回500 Internal Server Error，无效请求返回400 Bad Request）和/或JSON数据，以便前端可以根据这些信息提供更精确的用户反馈。
   • 前端Ajax的error回调函数应处理请求失败的情况，例如网络问题或服务器错误。
   • 可以考虑在删除操作进行时，在前端显示一个加载指示器，提升用户体验。
3. 前端代码组织: 当J*aScript代码量较大时，建议将其放入独立的.js文件中，并在HTML中通过引入。
4. CSS样式: 为删除按钮和任务列表添加合适的CSS样式，使其界面友好。
5. 一致性: 确保前端（Ajax请求类型、数据参数名）和后端（接收请求类型、获取参数名）之间的数据传递方式保持一致。本教程已将原始答案中的$_GET修正为$_POST以匹配Ajax的POST请求。

总结

通过本教程，您应该已经掌握了如何利用PHP、MySQL和Ajax技术，实现待办事项列表的无刷新动态删除功能。这包括了前端HTML结构的搭建、J*aScript (jQuery) 处理用户交互和Ajax请求的发送，以及后端PHP脚本处理数据库删除操作并返回结果。遵循安全最佳实践，尤其是SQL注入防护，是构建健壮Web应用的关键。通过这些技术，您可以为用户提供更加流畅和高效的Web应用体验。