使用 jQuery 和 DataTables 传递表单数据进行动态数据筛选

<form method="POST" id="frm">
    <select name="selectplace">
        <option value="PLACE 1">PLACE 1</option>
        <option value="PLACE 2">PLACE 2</option>
        <option value="PLACE 3">PLACE 3</option>
    </select>
    <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>

$(document).ready(function() {
    var table = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            "dataSrc": "",
            "data": function(d) {
                // 获取表单数据
                var frm_data = $('#frm').serialize();
                // 将表单数据添加到 AJAX 请求中
                return frm_data;
            }
        },
        columns: [
            { data: 'place_id' },
            { data: 'place_name' },
            { data: 'total_visitor' }
        ]
    });

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

<?php
  // 数据库连接信息 (请替换为你的实际信息)
  $servername = "localhost";
  $username = "your_username";
  $password = "your_password";
  $dbname = "your_database";

  // 创建连接
  $conn = new mysqli($servername, $username, $password, $dbname);

  // 检测连接
  if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
  }

  // 获取 POST 请求中的 selectplace 值
  $selectedplace = $_POST['selectplace'];

  // 构建 SQL 查询语句，使用预处理语句防止 SQL 注入
  $sql = "SELECT id, place_name, total_visitor 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'],
      );
  }

  // 设置响应头为 JSON 格式
  header('Content-Type: application/json');

  // 将数组编码为 JSON 字符串并输出
  echo json_encode($data);

  // 关闭连接
  $stmt->close();
  $conn->close();
?>