当前位置：首页 > 文章列表 > 文章 > php教程 > jQueryDataTables实现数据提交与动态更新

jQueryDataTables实现数据提交与动态更新

2025-11-01 21:36:46 0浏览收藏

本文详细讲解如何利用 jQuery 和 DataTables 插件，实现表单数据提交与动态更新，从而优化网页数据展示与交互。通过 AJAX 技术，将表单中选择的过滤条件（如地点）传递到后端 PHP 脚本，作为 SQL 查询的 WHERE 子句，实现对 DataTables 表格数据的动态筛选。文章重点介绍前端 HTML 表单和 DataTables 的初始化配置，以及后端 PHP 如何处理 AJAX 请求并返回 JSON 数据。同时，强调了使用 `serialize()` 方法序列化表单数据、`preventDefault()` 阻止默认提交行为、`ajax.reload()` 重新加载 DataTables 数据等关键技术点，并着重强调了安全性，务必使用预处理语句防止 SQL 注入攻击，确保系统安全稳定。

使用 jQuery 和 DataTables 传递表单数据到数据库并动态更新表格

本文旨在解决如何使用 jQuery 和 DataTables 插件，将表单选择的值传递到后端 PHP 脚本，作为 SQL 查询的 WHERE 子句，从而动态更新 DataTables 表格。我们将重点介绍如何通过 AJAX 提交表单数据，并在 DataTables 中重新加载数据，以实现数据的动态筛选和展示。

前端实现：HTML 表单和 DataTables 初始化

首先，我们需要一个包含

PLACE #	PLACE NAME	TOTAL VISITORS
PLACE #	PLACE NAME	TOTAL VISITORS

接下来，使用 jQuery 初始化 DataTables，并配置 AJAX 数据源。

$(document).ready(function() {
    var table = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            "dataSrc": "",
            "data": function(d) {
                var frm_data = $('#frm').serialize(); // 使用 serialize() 方法
                return frm_data; // 直接返回序列化后的字符串
            }
        },
        columns: [{
            data: 'place_id',
        }, {
            data: 'place_name',
        }, {
            data: 'total_visitor',
        }]
    });

    // 监听表单提交事件
    $("#frm").submit(function(e) {
        e.preventDefault(); // 阻止默认的表单提交行为
        table.ajax.reload(); // 重新加载 DataTables 数据
    });
});

代码解释：

$('#frm').serialize(): 将表单数据序列化为 URL 编码的字符串，例如 selectplace=PLACE+1。这是将表单数据传递到服务器的常用方法。
e.preventDefault(): 阻止表单的默认提交行为，防止页面刷新。
table.ajax.reload(): 重新加载 DataTables 的数据，触发 AJAX 请求，从而更新表格内容。

后端实现：PHP 处理 AJAX 请求并返回数据

在 json.php 文件中，接收来自前端的表单数据，构建 SQL 查询，并返回 JSON 格式的数据。

connect_error) {
      die("Connection failed: " . $conn->connect_error);
  }

  $selectedplace = $_POST['selectplace']; // 获取 selectplace 的值

  // 安全起见，使用预处理语句防止 SQL 注入
  $sql = "SELECT * FROM placestable WHERE place_name = ?";
  $stmt = $conn->prepare($sql);
  $stmt->bind_param("s", $selectedplace); // "s" 表示字符串类型

  $stmt->execute();
  $result = $stmt->get_result();

  $data = array();
  while($row = $result->fetch_assoc()) {
      $data[] = array(
          "place_id"=>$row['id'],
          "place_name"=> $row['place_name'],
          "total_visitor"=> $row['total_visitor'],
      );
  }

  echo json_encode($data);

  $stmt->close();
  $conn->close();
?>

代码解释：

$_POST['selectplace']: 获取前端传递的 selectplace 参数的值。
SQL 注入防范： 使用预处理语句 (prepare 和 bind_param) 来防止 SQL 注入攻击。这是至关重要的安全措施。
$stmt->bind_param("s", $selectedplace): 将 $selectedplace 的值绑定到 SQL 查询的参数中。 "s" 表示该参数是字符串类型。
$stmt->execute(): 执行预处理的 SQL 查询。
$result = $stmt->get_result(): 获取查询结果。
fetch_assoc(): 将结果集中的每一行数据提取为关联数组。
json_encode($data): 将 PHP 数组编码为 JSON 格式的字符串，以便前端 JavaScript 可以解析。

总结与注意事项

安全性： 始终使用预处理语句来防止 SQL 注入攻击。不要直接将用户输入拼接到 SQL 查询字符串中。
错误处理： 在 PHP 脚本中添加错误处理机制，例如检查数据库连接是否成功，以及查询是否执行成功。
调试： 使用浏览器的开发者工具（F12）来检查 AJAX 请求和响应，以及 JavaScript 代码的执行情况。
DataTables 配置： 根据实际需求配置 DataTables 的其他选项，例如分页、排序、搜索等。
表单序列化： 使用 serialize() 方法可以方便地将表单数据转换为 URL 编码的字符串，方便传递到服务器。
变量作用域： 确保 table 变量在表单提交事件处理函数中可以访问到。可以将 table 变量定义在 $(document).ready() 函数的外部，使其成为全局变量，或者使用闭包来保持对 table 变量的引用。

通过以上步骤，你可以实现将表单数据传递到后端，动态更新 DataTables 表格的功能。记住，安全性是第一位的，务必采取措施防止 SQL 注入攻击。

理论要掌握，实操不能落！以上关于《jQueryDataTables实现数据提交与动态更新》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！