使用 AJAX 动态更新 SQL 表数据与实现无刷新页面交互的教程

动态数据表格更新的挑战与解决方案

在现代 web 应用中，用户体验至关重要。当用户需要查看不同类型的数据（例如“已归档”与“未归档”记录）时，频繁的页面刷新会严重影响交互流畅性。传统方法是在每次筛选后重新加载整个页面，这不仅效率低下，而且会中断用户正在进行的内联编辑等操作。为了解决这一问题，我们可以利用 asynchronous javascript and xml (ajax) 技术，在后台与服务器进行数据交换，并仅更新页面上需要变化的部分。

本教程将指导您如何构建一个系统，通过点击按钮触发 AJAX 请求，从 SQL 数据库获取数据，并动态替换现有 HTML 表格的内容，同时确保表格中原有的内联编辑功能得以保留或重新生效。

核心原理：前后端分离与 JSON 数据交换

实现无刷新更新的关键在于将数据获取与页面渲染分离。

1. 服务器端 (PHP)： 负责根据请求参数从数据库查询数据，并将结果封装成标准格式（通常是 JSON）返回。
2. 客户端 (JavaScript/jQuery)： 负责发送 AJAX 请求到服务器，接收 JSON 响应，然后使用这些数据动态构建 HTML 结构，并替换页面上的相应元素。

服务器端数据接口设计

首先，我们需要一个灵活的 PHP 脚本来处理数据查询请求。这个脚本应该能够根据传入的参数（例如 isArchived 状态）来过滤数据，并将结果以 JSON 格式返回。

1. 数据获取函数

创建一个通用的函数来处理数据库查询。这个函数可以接受一个参数来指定 isArchived 的状态，从而实现数据的筛选。

prepare($sql);
        foreach ($params as $key => &$val) {
            $stmt->bindParam($key, $val);
        }
        $stmt->execute();
        return $stmt->fetchAll(PDO::FETCH_ASSOC); // 返回关联数组
    } catch (PDOException $e) {
        // 错误处理
        error_log("Database error: " . $e->getMessage());
        return [];
    }
}
?>

2. AJAX 请求处理脚本

创建一个专门的 PHP 文件（例如 fetch_people.php）来处理 AJAX 请求。这个文件将调用 getPeopleData 函数，并将其结果编码为 JSON 返回。

客户端交互与数据渲染

在客户端（HTML/JavaScript），我们需要：

1. 监听按钮点击事件。
2. 发送 AJAX 请求到服务器。
3. 接收服务器返回的 JSON 数据。
4. 根据 JSON 数据动态构建新的表格行。
5. 替换现有表格的 内容。

   1. HTML 结构

   您的页面上需要一个按钮来触发数据加载，以及一个表格来显示数据。

   
   显示已归档人员
   显示未归档人员
   
   
       
   
           
   
               
   姓氏
               
   名字
               
   性别
               
           
       
       
   
           
       
   
   
   
   

   2. JavaScript 渲染函数

   创建 JavaScript 函数来将单个数据项和数据列表渲染成 HTML 表格行。

   // client_script.js (或者直接在