正如摘要所述，本文将详细讲解如何使用 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); // 返回关联数组
}
?>注意事项：
蓝色大气通用企业公司网站2.0
下载
蓝色大气通用企业公司网站源码，这是一款采用经典的三层结构，可以动态、伪静态模式，后台功能实用，界面大气，无限级分类，单篇栏目添加等的企业网站源码，比较适合二次开发或者企业自用，感兴趣的可以下载看一下啊。网站源码完整，后台是我作为程序员多年认为最为好用的一款后台，有时间我将发布更多的模板供大家下载使用，数据库为ACCESS，如需MSSQL数据库可与我联系。功能介绍：【新闻文章管理】可以发布公司新闻和
- 安全性： 避免使用 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 注入，以及对用户输入进行验证和过滤。
