如何传递Select表单值至数据库作为查询条件填充DataTable

现有代码错误点 #

• jQuery选择器错误：获取表单时$('frm')是标签选择器，你表单id为frm，需要用id选择器$('#frm')
• DataTables默认AJAX为GET请求，需手动指定请求类型为POST
• 未监听表单提交事件，点击提交按钮后默认会刷新页面，不会触发DataTables数据重载
• json.php接收的参数名错误：表单下拉框的name是selectplace，用$_POST['selectedplace']无法接收参数
• SQL语句语法错误：WHERE子句需要指定匹配字段，不能直接拼接变量，同时要做SQL注入防护
• DataTables列配置和返回字段不匹配：配置的第一列是place_id，但json返回的是id，需要统一字段名

修改后的代码 #

1. 前端JQuery代码 #

$(document).ready(function() {
    // 初始化DataTables，存为变量方便后续调用重载
    var placeTable = $('#place-table').DataTable({
        "ajax": {
            url: "json.php",
            type: "POST", // 指定POST请求
            "dataSrc": "",
            "data": function(d) {
                // 正确获取表单序列化数据
                var frm_data = $('#frm').serializeArray();
                $.each(frm_data, function(key, val) {
                    d[val.name] = val.value;
                });
            }
        },
        columns: [
            // 字段名和json返回的id对应，也可以在json里把字段名改为place_id
            { data: 'id' }, 
            { data: 'place_name' },
            { data: 'total_visitor' }
        ]
    });

    // 监听表单提交事件，阻止默认刷新，触发表格重载
    $('#frm').on('submit', function(e) {
        e.preventDefault();
        placeTable.ajax.reload();
    });
});

2. json.php代码 #

<?php 
// 参数存在性校验
$selectedplace = isset($_POST['selectplace']) ? $_POST['selectplace'] : '';
// 此处补充你的数据库连接初始化代码，省略$conn的初始化逻辑

// 使用预处理语句防SQL注入
$stmt = mysqli_prepare($conn, "SELECT id, place_name, total_visitor FROM placestable WHERE place_name = ?");
// 绑定参数，s代表参数为字符串类型
mysqli_stmt_bind_param($stmt, "s", $selectedplace);
// 执行查询
mysqli_stmt_execute($stmt);
// 获取结果集
$result = mysqli_stmt_get_result($stmt);

$data = array();
while($row = mysqli_fetch_assoc($result)) {
    $data[] = array(
        "id"=>$row['id'],
        "place_name"=> $row['place_name'],
        "total_visitor"=> $row['total_visitor'],
    );
}
echo json_encode($data);
// 释放数据库资源
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

可选优化 #

如果不需要点击提交按钮，选择下拉选项后直接刷新表格，可以额外添加select的change事件触发placeTable.ajax.reload()即可。

内容的提问来源于stack exchange，提问作者Dranoo