如何用jQuery/JavaScript将多字段表单数据转JSON用于AJAX POST请求

问题原因 #

直接对FormData执行JSON.stringify不会生效，因为FormData是浏览器内置的特殊键值对容器，不属于普通JS对象，默认序列化只会得到空对象。

实现步骤 #

1. 转换FormData为普通JS对象 #

需要遍历FormData的所有键值对，同时处理表单多值字段（比如示例中的product_id数组）的合并逻辑：

var form = $('#form_promoprod');
var form_data = new FormData(form[0]);
var json_data = {};

form_data.forEach((value, key) => {
    // 处理name带[]后缀的数组字段
    if (key.endsWith('[]')) {
        const realKey = key.slice(0, -2);
        if (!json_data[realKey]) json_data[realKey] = [];
        json_data[realKey].push(value);
        return;
    }
    // 处理重复键的多值场景
    if (json_data[key] !== undefined) {
        if (!Array.isArray(json_data[key])) json_data[key] = [json_data[key]];
        json_data[key].push(value);
    } else {
        json_data[key] = value;
    }
});
// 序列化得到JSON字符串
const formJson = JSON.stringify(json_data);
console.log(formJson);

2. 修改AJAX提交配置 #

因为提交的是JSON格式，需要调整原来的contentType配置，不再使用FormData的提交参数：

$.ajax({
    type: form[0].method,
    url: base_url+'promotion/Main_promotion/mc_update_promotion',
    data: formJson,
    // 声明请求体为JSON格式
    contentType: 'application/json; charset=utf-8',   
    cache: false,      
    processData: false,
    // 补充success、error等业务回调逻辑
})

后端接收注意事项 #

后端无法通过常规的表单参数绑定获取JSON数据，需要读取原始请求体再解码：

• PHP场景：使用file_get_contents('php://input')获取JSON字符串，再通过json_decode()转换为数组/对象
• Java/Python等后端框架：配置请求体解析规则，直接绑定为对应结构的实体类即可

特殊场景说明 #

如果表单包含文件上传需求，不要转换为JSON提交，保持原来的FormData提交方式即可，后端直接读取表单参数和文件流就能正常处理，无需额外转码。

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