使用JS load方法重载多表格内容时如何传递PHP变量/数组到后端

jQuery的load()方法本身支持两种传参方式，你可以根据你的参数类型和场景选择：

方式1：GET请求传参（适合参数较少、非敏感场景） #

直接将参数序列化后拼在请求URL末尾即可，字符串和数组都可以正常传递：

JS代码 #

function refreshTable(id, yourStr, yourArr){
    // 用$.param自动格式化参数，数组也可手动JSON序列化后传递
    const query = $.param({
        project_id: id,
        input_str: yourStr,
        input_arr: JSON.stringify(yourArr)
    });
    $('#' + id).load('getTable.php?' + query);
}

getTable.php接收代码 #

<?php
// 接收GET参数
$projectId = $_GET['project_id'] ?? '';
$inputStr = $_GET['input_str'] ?? '';
$inputArr = isset($_GET['input_arr']) ? json_decode($_GET['input_arr'], true) : [];

// 此处执行你的SQL查询逻辑，务必使用预处理语句防注入
// 输出表格内容即可
echo '<table><tr><td>'.$projectId.'的查询结果</td></tr></table>';
?>

方式2：POST请求传参（适合参数较多、或不希望参数暴露在URL的场景） #

load()方法的第二个参数传入数据对象时，会自动以POST方式发送请求，数组可以直接传递无需手动序列化：

JS代码 #

function refreshTable(id, yourStr, yourArr){
    const postData = {
        project_id: id,
        input_str: yourStr,
        input_arr: yourArr
    };
    $('#' + id).load('getTable.php', postData);
}

getTable.php接收代码 #

<?php
// 接收POST参数
$projectId = $_POST['project_id'] ?? '';
$inputStr = $_POST['input_str'] ?? '';
$inputArr = $_POST['input_arr'] ?? [];

// 后续SQL查询、表格输出逻辑同上
?>

安全提示：所有前端传入的参数都需要做合法性校验，执行SQL操作必须使用预处理语句，避免SQL注入风险。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup