使用 AJAX 和 PHP 动态更新 SQL 表格数据-php教程-PHP中文网

使用 AJAX 和 PHP 动态更新 SQL 表格数据

霞舞

发布： 2025-09-07 13:25:01

原创

687人浏览过

使用 ajax 和 php 动态更新 sql 表格数据

本文旨在提供一种使用 AJAX 和 PHP 在不刷新页面的情况下，根据按钮点击事件动态更新 SQL 表格数据的方法。通过前后端配合，实现数据的异步加载和渲染，提高用户体验。重点在于服务端如何处理请求并返回数据，以及客户端如何利用 JavaScript 接收数据并更新表格内容。

前言

在 Web 开发中，经常需要根据用户操作动态更新页面内容，而避免页面刷新可以显著提升用户体验。本文将介绍如何利用 AJAX 和 PHP，在点击按钮后，从 SQL 数据库中获取数据，并动态替换当前页面上的表格内容，同时保留表格中 zuojiankuohaophpcntd> 元素的内联编辑功能。

服务端数据获取 (PHP)

首先，我们需要一个 PHP 函数来根据 isArchived 状态从数据库中获取数据。为了提高代码的可维护性和安全性，建议使用参数化的 SQL 查询，并且只选择需要的列，避免使用 SELECT *。

<?php
function getValues($archived = null) {
    $archivedCriteria = "";
    if (($archived === 1) || ($archived === 0)) {
        $archivedCriteria = " AND isArchived = :archived";
    }

    $sql = "SELECT personId, lName, fName, mName, suffixName, gender FROM people WHERE 1 = 1 ${archivedCriteria} ORDER BY addedAt DESC";
    $stmt = $db->prepare($sql);

    if ($archived !== null) {
        $stmt->bindValue(":archived", $archived, PDO::PARAM_INT);
    }

    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

登录后复制

注意事项：

立即学习“PHP免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

确保使用 PDO 或其他安全的数据库访问方式，防止 SQL 注入攻击。
$db 对象需要提前建立，代表数据库连接。
PDO::PARAM_INT 指定参数类型为整数，增加安全性。

处理 AJAX 请求 (PHP)

创建一个 PHP 文件 (例如 selectunarchivedpeople.php) 来处理 AJAX 请求。该文件接收 archived 参数，调用 getValues 函数获取数据，并将结果以 JSON 格式返回。

<?php
// 包含数据库连接文件
require_once 'db_connect.php'; // 假设有 db_connect.php 文件包含 $db 对象

// 包含 getValues 函数
require_once 'get_values.php'; // 假设 getValues 函数在 get_values.php 文件中

if (isset($_POST["archived"])) {
    $archived = intval($_POST["archived"]); // 确保 archived 是整数
    $data = getValues($archived);
    header('Content-Type: application/json');
    echo json_encode($data);
} else {
    http_response_code(400); // Bad Request
    echo json_encode(array("error" => "Missing archived parameter"));
}
?>

登录后复制

注意事项：

立即学习“PHP免费学习笔记（深入）”；

设置 Content-Type 为 application/json，确保客户端正确解析 JSON 数据。
使用 json_encode 函数将 PHP 数组转换为 JSON 字符串。
进行错误处理，例如当缺少 archived 参数时，返回错误信息。
使用 intval 强制转换 $_POST["archived"] 为整数，增加安全性。

客户端 AJAX 请求 (JavaScript)

使用 JavaScript (jQuery) 发送 AJAX 请求，获取数据，并更新表格。

$('#display-archived').click(function(){
    $.ajax({
        method: "post",
        url: "selectunarchivedpeople.php",
        data: { archived: 1 }, //  1 表示显示已归档，0 表示显示未归档
        dataType: "json",
        success: function(data) {
            console.log(data);
            // 调用函数更新表格
            updateTable(data);
        },
        error: function(xhr, status, error) {
            console.error("AJAX request failed:", status, error);
            console.log(xhr.responseText); // 打印服务器返回的错误信息
        }
    });
});

function updateTable(data) {
    let tableBody = $('#table tbody');
    tableBody.empty(); // 清空表格内容

    // 循环数据，生成新的表格行
    $.each(data, function(index, item) {
        let row = '<tr>';
        row += '<td><div contenteditable="true" onBlur="updateValue(this, \'lName\', \'' + md5(item.personId) + '\')" onClick="activate(this)">' + item.lName + '</div></td>';
        row += '<td><div contenteditable="true" onBlur="updateValue(this, \'fName\', \'' + md5(item.personId) + '\')" onClick="activate(this)">' + item.fName + '</div></td>';
        row += '<td><div contenteditable="true" onBlur="updateValue(this, \'mName\', \'' + md5(item.personId) + '\')" onClick="activate(this)">' + item.mName + '</div></td>';
        row += '<td><div contenteditable="true" onBlur="updateValue(this, \'suffixName\', \'' + md5(item.personId) + '\')" onClick="activate(this)">' + item.suffixName + '</div></td>';
        row += '<td>' + item.gender + '</td>';
        // ... 其他列
        row += '</tr>';
        tableBody.append(row);
    });
}

function md5(str) {
    // 简单示例，实际应用中建议使用成熟的 MD5 库
    return String(str.hashCode());
}

String.prototype.hashCode = function() {
  var hash = 0, i, chr;
  if (this.length === 0) return hash;
  for (i = 0; i < this.length; i++) {
    chr   = this.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
};

登录后复制

注意事项：

立即学习“PHP免费学习笔记（深入）”；

dataType: "json" 告诉 jQuery 将响应数据解析为 JSON 对象。
updateTable 函数清空表格内容，并根据新的数据重新生成表格行。
确保 updateValue 和 activate 函数在页面中定义，以支持内联编辑功能。
错误处理函数 error 用于处理 AJAX 请求失败的情况，打印错误信息方便调试。
为了安全，不建议在前端直接使用 MD5，这里只是为了代码演示。实际生产环境中，应该在后端生成唯一的 ID。
md5 函数只是一个简单的哈希函数示例，实际应用中应该使用更安全的哈希算法。

HTML 结构

确保 HTML 结构包含一个按钮和一个表格，并且表格有一个 tbody 元素。

<button id="display-archived">显示已归档</button>
<table id="table">
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Suffix Name</th>
            <th>Gender</th>
            <!-- 其他列 -->
        </tr>
    </thead>
    <tbody>
        <!-- 初始数据 -->
    </tbody>
</table>

登录后复制

总结

通过以上步骤，我们实现了一个简单的 AJAX 和 PHP 动态更新 SQL 表格数据的示例。核心在于服务端提供 API 接口，客户端通过 AJAX 请求获取数据，并动态更新页面内容。这种方法可以有效提升用户体验，避免页面刷新，并且可以灵活地处理各种数据交互场景。在实际应用中，需要根据具体需求进行调整和优化，例如添加分页、排序等功能，并加强安全性考虑。

以上就是使用 AJAX 和 PHP 动态更新 SQL 表格数据的详细内容，更多请关注php中文网其它相关文章！