PHP与AJAX实现待办列表任务的无刷新删除功能

程序猿 • 2025年12月23日 13:17:28 • 好文分享 • 阅读 0

本教程详细阐述如何利用php、mysql与ajax技术，在不刷新整个页面的前提下，实现待办列表中任务的删除功能。通过前端javascript发送异步请求至后端php脚本处理数据库操作，并动态更新页面dom，显著提升用户交互体验。

在现代Web应用中，用户对交互体验的要求越来越高。传统的表单提交和页面刷新方式在执行删除等操作时，会中断用户的当前浏览流程。通过结合PHP后端处理、MySQL数据库存储和AJAX（Asynchronous JavaScript and XML）前端技术，我们可以实现无刷新删除功能，让用户操作更加流畅。

一、核心原理概述

无刷新删除的核心在于AJAX。当用户点击删除按钮时：

前端JavaScript：捕获点击事件，获取待删除任务的唯一标识（ID）。AJAX请求：JavaScript通过AJAX向服务器发送一个异步请求，通常是POST请求，将任务ID传递给后端。后端PHP：接收请求，连接MySQL数据库，执行DELETE语句删除对应任务。后端响应：PHP脚本将操作结果（成功或失败）返回给前端。前端JavaScript：接收后端响应，根据结果动态更新页面DOM，例如，将已删除的任务从列表中移除，而无需重新加载整个页面。

二、数据库准备

首先，我们需要一个存储待办事项的数据库表。假设我们有一个名为 tasks 的表，结构如下：

CREATE TABLE `tasks` (    `task_id` INT AUTO_INCREMENT PRIMARY KEY,    `task_name` VARCHAR(255) NOT NULL,    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP);

三、前端页面构建 (HTML)

在主页面（例如 index.php）中，我们需要循环显示待办事项，并为每个事项提供一个删除按钮。关键在于为每个任务行添加一个唯一的标识，以便JavaScript能够精准定位和操作。

立即学习“PHP免费学习笔记（深入）”；

query("SELECT task_id, task_name FROM tasks ORDER BY task_id DESC");$tasks = $stmt->fetchAll();?>        我的待办列表                    body { font-family: Arial, sans-serif; margin: 20px; }        h1 { color: #333; }        #task-list { border: 1px solid #ccc; border-radius: 5px; padding: 10px; max-width: 600px; margin-top: 20px; }        .task-item {            display: flex;            align-items: center;            padding: 10px 0;            border-bottom: 1px solid #eee;        }        .task-item:last-child {            border-bottom: none;        }        .task-name {            flex-grow: 1;            font-size: 1.1em;        }        .delete-btn {            background-color: #dc3545; /* 红色 */            color: white;            border: none;            padding: 6px 12px;            cursor: pointer;            border-radius: 4px;            font-size: 0.9em;            transition: background-color 0.2s ease;        }        .delete-btn:hover {            background-color: #c82333; /* 深红色 */        }        .no-tasks {            color: #666;            text-align: center;            padding: 20px;        }        我的待办事项
                                                        <div class="task-item task-row-">                                                            <button class="delete-btn" data-task-id="">删除                
                                暂无待办事项。

每个任务项（div.task-item）都带有一个形如 task-row-123 的唯一类名，其中 123 是任务的 task_id。删除按钮（button.delete-btn）使用 data-task-id 属性存储了对应的任务ID。这种方式比直接使用 id 属性更灵活，因为 id 必须是页面唯一的。

四、前端交互逻辑 (JavaScript/jQuery)

接下来，我们编写JavaScript代码来处理删除按钮的点击事件，并通过AJAX与后端进行通信。

$(document).ready(function() { // 监听所有具有 'delete-btn' 类的按钮的点击事件 $('.delete-btn').click(function() { var taskId = $(this).data("task-id"); // 获取按钮的 data-task-id 属性值 // 弹出确认框，提升用户体验并防止误操作 if (confirm("确定要删除此任务吗？")) { // 发送 AJAX POST 请求 $.ajax({ type: "POST", // 使用 POST 方法发送数据 url: "task_delete.php", // 后端处理删除请求的脚本 data: { id: taskId }, // 将任务ID作为数据发送 cache: false, // 禁用缓存 success: function(response) { // 假设后端返回 JSON 格式的响应 try { var result = JSON.parse(response); if (result.status === 'success') { // 删除成功，使用 jQuery 的 fadeOut 动画效果隐藏并移除任务行 $(".task-row-" + taskId).fadeOut('slow', function() { $(this).remove(); // 动画结束后从 DOM 中彻底移除元素 // 如果列表为空，可以显示“暂无待办事项”提示 if ($('#task-list').children('.task-item:visible').length === 0) { $('#task-list').append('

暂无待办事项。

'); } }); } else { alert("删除失败: " + result.message); } } catch (e) { alert("服务器响应异常，请重试。"); console.error("JSON parse error:", e, "Response:", response); } }, error: function(xhr, status, error) { // 请求失败时的处理 alert("请求失败，请检查网络或稍后再试。"); console.error("AJAX error:", status, error); } }); } else { return false; // 用户取消删除操作 } }); });

使用 $(document).ready() 确保DOM加载完成后再绑定事件。$(this).data(“task-id”) 用于获取按钮的 data-task-id 属性值。$.ajax() 发送 POST 请求到 task_delete.php，并将任务ID作为 id 参数传递。success 回调函数处理服务器响应。我们期望后端返回JSON数据，包含 status 和 message。如果删除成功，$(“.task-row-” + taskId).fadeOut(‘slow’, function() { $(this).remove(); }); 会使对应的任务行缓慢消失，然后从DOM中彻底移除。

五、后端处理脚本 (PHP)

创建一个名为 task_delete.php 的文件，用于接收前端的AJAX请求并执行数据库删除操作。为了安全性，我们将使用PDO预处理语句来防止SQL注入。

5.1 database.php (数据库连接配置)

<?php// database.php$host = 'localhost'; // 数据库主机$db = 'todo_app'; // 数据库名$user = 'root'; // 数据库用户名$pass = ''; // 数据库密码$charset = 'utf8mb4'; // 字符集$dsn = "mysql:host=$host;dbname=$db;charset=$charset";$options = [ PDO

以上就是PHP与AJAX实现待办列表任务的无刷新删除功能的详细内容，更多请关注php中文网其它相关文章！