使用 AJAX 和 PHP 实现动态表格数据更新：无需刷新页面-php教程-PHP中文网

使用 AJAX 和 PHP 实现动态表格数据更新：无需刷新页面

心靈之曲

发布： 2025-09-07 14:08:01

原创

953人浏览过

使用 ajax 和 php 实现动态表格数据更新：无需刷新页面

正如摘要所述，本文将详细讲解如何使用 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。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

$('#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);
}

登录后复制

注意事项：