jQuery提交带数组元素的Ajax POST表单无法获取$_POST如何解决

问题根源 #

• 你初始化的friends是普通数组，而你用friends[x.name] = x.value的方式赋值，本质是给数组加了字符串类型的自定义属性，JSON序列化数组时只会保留数字索引的元素，这部分自定义属性会被完全丢弃，导致提交的friends内容为空。
• 你手动将friends转成JSON字符串再提交，PHP默认不会自动解析JSON字符串为数组，所以$_POST拿到的只是字符串，不符合常规表单提交的解析效果。

解决方案1：直接提交序列化表单（推荐，最贴合原生表单提交效果） #

不需要自己组装数据，直接用FormData承载表单内容，额外参数直接追加即可，PHP会自动解析成和原生POST完全一致的数组结构：

var formData = new FormData(jQuery("#invite-form")[0]);
formData.append('action', 'invite-friends');

jQuery.ajax({
    type: 'POST',
    url: '/invitation.php',
    data: formData,
    dataType: 'json',
    processData: false, // 禁止jQuery自动处理FormData
    contentType: false, // 禁止jQuery设置Content-Type请求头，由浏览器自动生成带boundary的正确头
    encode: true
}).done(function(data){
    console.log(data);
    if(data.success == true){
        // 后续业务逻辑
    }
});

这种方式提交后，PHP端可以直接通过$_POST['friends']拿到完整的嵌套数组，和普通表单无ajax提交的效果完全一致。

解决方案2：手动解析表单字段生成嵌套结构（适合需要先处理表单数据再提交的场景） #

如果你需要先对表单数据做加工再提交，可以按字段名的层级解析成嵌套对象，再提交：

// 序列化表单并转换为层级对象
function serializeFormToObject(form) {
    var obj = {};
    var formArray = jQuery(form).serializeArray();
    jQuery.each(formArray, function () {
        var name = this.name;
        var value = this.value;
        // 拆分字段名的层级标识，比如friends[0][first_name]拆为['friends','0','first_name']
        var keys = name.match(/[^\[\]]+/g);
        var current = obj;
        for (var i = 0; i < keys.length; i++) {
            var key = keys[i];
            if (i === keys.length - 1) {
                current[key] = value;
            } else {
                if (current[key] === undefined) {
                    // 下一级是数字索引就初始化为数组，否则初始化为对象
                    current[key] = isNaN(keys[i+1]) ? {} : [];
                }
                current = current[key];
            }
        }
    });
    return obj;
}

var formData = serializeFormToObject("#invite-form");
formData.action = 'invite-friends';

jQuery.ajax({
    type: 'POST',
    url: '/invitation.php',
    data: formData,
    dataType: 'json',
    encode: true
}).done(function(data){
    console.log(data);
    if(data.success == true){
        // 后续业务逻辑
    }
});

提交后PHP端同样可以直接通过$_POST['friends']拿到完整的嵌套数组。

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