如何通过AJAX将jQuery对象数据发送至PHP（Repeater JS表单场景）

错误点梳理 #

• AJAX请求使用POST方法提交数据，但PHP代码中用$_GET接收参数，二者不匹配导致无法拿到数据
• 嵌套层级的repeater对象直接作为AJAX的data参数时，jQuery默认的表单序列化规则可能丢失嵌套结构，造成数据传输异常
• 若设置了dataType: 'json'却没有返回符合JSON格式的内容，AJAX会判定为请求失败

修复步骤 #

1. 前端AJAX代码调整 #

把formData转成JSON字符串传输，同时指定请求数据格式：

<?php $dir = plugin_dir_url( __FILE__ ) . "formdata.php"; ?>
<script>
var form = "<?php echo $dir ?>";
// 可在控制台先校验repeaterVal返回的数据是否正常
console.log('表单原始值：', jQuery('.repeater').repeaterVal());
var formData = JSON.stringify(jQuery('.repeater').repeaterVal());

$.ajax({
    method: "POST",
    url: form,
    data: formData,
    contentType: 'application/json', // 告知后端传输的是JSON格式数据
    dataType: 'json', // 要求后端返回JSON格式响应
    success: function (data) {
        console.log("表单提交成功", data);
    },
    error: function (jqXHR, exception) {
        console.log('请求错误', jqXHR, exception);
    }
});
</script>

2. 后端PHP代码调整 #

通过输入流接收JSON数据，解析为数组后处理：

<?php
// 接收JSON格式的POST原始数据
$rawData = file_get_contents('php://input');
$formData = json_decode($rawData, true); // 第二个参数设为true直接转为关联数组

if(empty($formData)){
    echo json_encode(['status' => 'error', 'msg' => '未接收到有效表单数据']);
    exit;
}

// 此处可插入数据库逻辑，注意做数据校验和参数绑定避免SQL注入，示例参考：
// $pdo = new PDO("mysql:host=数据库地址;dbname=库名;charset=utf8mb4", '用户名', '密码');
// $stmt = $pdo->prepare("INSERT INTO 表名 (字段1,字段2) VALUES (?,?)");
// $stmt->execute([$formData['对应字段1'], $formData['对应字段2']]);

// 处理完成后返回JSON格式响应
echo json_encode([
    'status' => 'success',
    'msg' => '数据接收成功',
    'raw_data' => $formData // 可返回接收到的数据供前端校验
]);
?>

额外注意事项 #

• 插入数据库前必须做数据合法性校验，使用参数绑定的方式操作数据库，避免SQL注入风险
• 可通过浏览器控制台的网络面板查看AJAX请求的载荷是否正常，先排查前端数据传输问题
• 解析嵌套repeater结构时注意层级对应，提前设计好数据库表的关联关系适配嵌套数据结构

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