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

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

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

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

首先，我们需要一个包含 <select> 元素的 HTML 表单，用于让用户选择过滤条件。同时，创建一个用于展示数据的 DataTables 表格。

<form method="POST" id="frm">
    &lt;select name=&quot;selectplace&quot;&gt;
        <option value="PLACE 1">PLACE 1</option>
        <option value="PLACE 2">PLACE 2</option>
        <option value="PLACE 3">PLACE 3</option>
    &lt;/select&gt;
    <button type="submit" name="submitPlace">SUBMIT</button>
</form>

<div class="table-responsive">
    <table class="table table-bordered table-striped text-center" id="place-table">
        <thead>
            <tr>
                <th>PLACE #</th>
                <th>PLACE NAME</th>
                <th>TOTAL VISITORS</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>PLACE #</th>
                <th>PLACE NAME</th>
                <th>TOTAL VISITORS</th>
            </tr>
        </tfoot>
    </table>
</div>

接下来，使用 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 格式的数据。

<?php
  $servername = "localhost";
  $username = "your_username";
  $password = "your_password";
  $dbname = "your_dbname";

  $conn = new mysqli($servername, $username, $password, $dbname);

  if ($conn->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学习网公众号吧！