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

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

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

一、核心原理概述

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

前端J*aScript：捕获点击事件，获取待删除任务的唯一标识（ID）。
AJAX请求：J*aScript通过AJAX向服务器发送一个异步请求，通常是POST请求，将任务ID传递给后端。
后端PHP：接收请求，连接MySQL数据库，执行DELETE语句删除对应任务。
后端响应：PHP脚本将操作结果（成功或失败）返回给前端。
前端J*aScript：接收后端响应，根据结果动态更新页面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）中，我们需要循环显示待办事项，并为每个事项提供一个删除按钮。关键在于为每个任务行添加一个唯一的标识，以便J*aScript能够精准定位和操作。

<?php
// database.php 文件包含数据库连接配置
include 'database.php'; 

// 假设 $pdo 是已建立的PDO数据库连接对象
// 从数据库获取任务列表
$stmt = $pdo->query("SELECT task_id, task_name FROM tasks ORDER BY task_id DESC");
$tasks = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的待办列表</title>
    <!-- 引入 jQuery 库，用于简化 AJAX 操作和 DOM 操作 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        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;
        }
    </style>
</head>
<body>
    <h1>我的待办事项</h1>
    <div id="task-list">
        <?php if (!empty($tasks)): ?>
            <?php foreach ($tasks as $task): ?>
                <!-- 为每个任务行添加一个唯一的类名，便于JS定位和删除 -->
                <div class="task-item task-row-<?php echo htmlspecialchars($task['task_id']); ?>">
                    <span class="task-name"><?php echo htmlspecialchars($task['task_name']); ?></span>
                    <!-- 删除按钮使用 data-task-id 属性存储任务ID -->
                    <button class="delete-btn" data-task-id="<?php echo htmlspecialchars($task['task_id']); ?>">删除</button>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p class="no-tasks">暂无待办事项。</p>
        <?php endif; ?>
    </div>

    <!-- J*aScript 代码将放在这里 -->
</body>
</html>

关键点说明：

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

219 查看详情乾坤圈新媒体矩阵管家

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

四、前端交互逻辑 (J*aScript/jQuery)

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

<script type="text/j*ascript">
    $(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('<p class="no-tasks">暂无待办事项。</p>');
                                    }
                                });
                            } 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; // 用户取消删除操作
            }
        });
    });
</script>

关键点说明：

使用 $(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中文网其它相关文章！

# 动态网页 # 重庆网站建设的技术方案 # 昭通seo优化费用 # 金山电影网站建设 # 微信营销的具体推广方式 # 衡阳seo营销报价 # 梁子湖网站排名优化 # 旅游营销推广步骤包括 # 标准的seo文章推广工具 # 企业关键词排名优化外包 # 图书网站推广策划案 # 运算符 # 单元格 # 数据库中 # 回调 # 表单 # mysql # 保存为 # 移除 # 暂无 # 后端 # app # go # ajax # json # 前端 # js # html # jquery # java # javascript # php

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-25

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。