正如摘要所述，本文将详细讲解如何使用 AJAX 和 PHP 实现动态更新 SQL 表格数据，避免页面刷新，并保持表格内联编辑功能的可用性。
1. 服务器端数据获取
首先，我们需要创建一个 PHP 函数，负责从数据库中获取数据。该函数接收一个参数，用于指定是否获取已存档的数据。
<?php function getValues($archived = null) { $archivedCriteria = ""; if (($archived === 1) || ($archived === 0)) { $archivedCriteria = " AND isArchived = :archived"; // 添加存档状态的筛选条件 } // 强烈建议不要使用 SELECT *，明确指定需要查询的列 $sql = "SELECT column1, column2, column3, personId, lName, fName, mName, suffixName, gender FROM people WHERE 1 = 1 ${archivedCriteria} ORDER BY addedAt DESC"; $stmt = $db->prepare($sql); //绑定参数，防止SQL注入 if ($archived === 1 || $archived === 0){ $stmt->bindValue(":archived", $archived, PDO::PARAM_INT); } $stmt->execute(); return $stmt->fetchAll(PDO::FETCH_ASSOC); // 返回关联数组 } ?>
注意事项：
- 安全性： 避免使用 SELECT *，明确指定需要查询的列，防止敏感数据泄露。
- 参数绑定： 使用参数绑定（bindValue）防止 SQL 注入攻击。
- 错误处理： 在实际应用中，应添加错误处理机制，例如使用 try-catch 块捕获数据库操作异常。
2. 创建处理 AJAX 请求的 PHP 文件
创建一个 PHP 文件（例如 selectunarchivedpeople.php），用于处理来自客户端的 AJAX 请求。该文件接收 archived 参数，调用 getValues 函数获取数据，并将数据以 JSON 格式返回。
立即学习“PHP免费学习笔记（深入）”；
<?php // 包含数据库连接文件 require_once 'db_connection.php'; // 假设包含 $db 对象 // 包含 getValues 函数 require_once 'data_access.php'; // 假设包含 getValues 函数 // 获取 POST 请求中的 archived 参数 $archived = isset($_POST["archived"]) ? intval($_POST["archived"]) : null; // 调用 getValues 函数获取数据 $data = getValues($archived); // 将数据编码为 JSON 格式并输出 header('Content-Type: application/json'); echo json_encode($data); ?>
注意事项：
- 数据库连接： 确保包含数据库连接文件，并已建立数据库连接。
- Content-Type： 设置响应头 Content-Type: application/json，告知客户端返回的是 JSON 数据。
- 错误处理： 添加错误处理机制，例如检查 $_POST[“archived”] 是否存在以及是否为有效值。
3. 客户端 AJAX 请求
使用 JavaScript (jQuery) 发送 AJAX 请求到 selectunarchivedpeople.php。
$('#display-archived').click(function(){ $.ajax({ method: "post", url: "selectunarchivedpeople.php", data: { archived: 1 }, // 发送 archived 参数，值为 1 表示获取已存档数据 dataType: "json", // 期望服务器返回 JSON 数据 success: function(data) { console.log(data); // 在控制台查看返回的数据 updateTable(data); // 调用函数更新表格 }, error: function(xhr, status, error) { console.error("AJAX 请求失败:", status, error); } }); });
注意事项：
- data： 确保正确传递 archived 参数，告知服务器需要获取的数据类型。
- dataType： 设置 dataType 为 “json“，jQuery 会自动解析 JSON 响应。
- error： 添加 error 回调函数，处理 AJAX 请求失败的情况。
4. 客户端数据渲染和表格更新
创建一个 JavaScript 函数 updateTable，用于接收从服务器返回的 JSON 数据，并更新表格的内容。
function updateTable(data) { let tableBody = $('#table tbody'); // 获取表格的 tbody 元素 tableBody.empty(); // 清空表格内容 // 循环遍历数据，创建新的表格行 $.each(data, function(index, row) { let newRow = '<tr>'; newRow += '<td><div contenteditable="true" onBlur="updateValue(this, 'lName', '' + md5(row.personId) + '')" onClick="activate(this)">' + row.lName + '</div></td>'; newRow += '<td>' + row.fName + '</td>'; newRow += '<td>' + row.mName + '</td>'; newRow += '<td>' + row.suffixName + '</td>'; newRow += '<td>' + row.gender + '</td>'; // 添加其他列 newRow += '</tr>'; tableBody.append(newRow); // 将新的表格行添加到 tbody 中 }); } function md5(str) { // 简化的 MD5 哈希函数，仅用于示例 // 在生产环境中，请使用更安全的哈希算法 return str.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0); }
注意事项：
- tableBody.empty()： 在更新表格内容之前，先清空表格，避免数据重复。
- 循环遍历： 使用 $.each() 循环遍历 JSON 数据，为每一行数据创建一个新的表格行。
- 内联编辑： 保留内联编辑功能，确保 contenteditable 属性和 onBlur 事件处理程序正确设置。
- MD5： md5 函数仅用于生成唯一的 ID，在生产环境中，应使用更安全的哈希算法。
- XSS 防护： 对从服务器获取的数据进行 HTML 转义，防止 XSS 攻击。
5. 总结
通过以上步骤，我们成功地实现了使用 AJAX 和 PHP 动态更新 SQL 表格数据的功能，避免了页面刷新，并保持了表格内联编辑功能的可用性。 这种方法可以提高用户体验，并使 Web 应用程序更加流畅和响应迅速。
优化方向：
- 分页： 如果数据量很大，可以考虑添加分页功能，每次只加载部分数据。
- 加载指示器： 在 AJAX 请求期间显示加载指示器，告知用户正在加载数据。
- 错误处理： 完善错误处理机制，例如在 AJAX 请求失败时显示错误消息。
- 代码复用： 将 AJAX 请求和表格更新代码封装成可复用的函数或组件。
- 安全性： 始终注意安全性，例如使用参数绑定防止 SQL 注入，以及对用户输入进行验证和过滤。
以上就是使用 AJAX 和 PHP 实现动态表格数据更新：无需刷新页面的详细内容，更多请关注php javascript java jquery html js json ajax app access php JavaScript sql json jquery ajax html xss 数据类型 封装 select try catch Error 回调函数 循环 事件 算法 数据库