jQuery AJAX POST提交x-www-form-urlencoded同键多值仅传最后一个如何解决

问题根因 #

JavaScript 普通对象不支持重复键，你在 data 配置中两次声明同名 key 属性时，后定义的 value2 会直接覆盖先声明的 value1，因此最终提交时只会发送 value2。

解决方法 #

根据后端接收规则，可选择以下任意一种方案实现同键多值提交：

方案1：值设为数组 + 开启traditional配置（推荐，易维护）

如果后端支持接收同键多值的urlencoded参数，将key对应的值设为数组，同时开启 traditional: true 避免jQuery自动给数组键加[]后缀：

var settings = {
    "url": "https://sample.com",
    "method": "POST",
    "timeout": 0,
    "traditional": true, // 核心配置：使用传统参数序列化规则，不追加[]后缀
    "headers": {
        "Authorization": basicauth,
        "Content-Type": "application/x-www-form-urlencoded"
    },
    "data": {
        "key": ["value1", "value2"]
    }
};

$.ajax(settings).done(function(response) {
    console.log(response);
});

提交时会自动生成格式为 key=value1&key=value2 的请求体。

方案2：手动拼接参数字符串

直接手动拼接符合要求的参数字符串赋值给data，完全可控：

var settings = {
    "url": "https://sample.com",
    "method": "POST",
    "timeout": 0,
    "headers": {
        "Authorization": basicauth,
        "Content-Type": "application/x-www-form-urlencoded"
    },
    "data": "key=value1&key=value2" // 直接写拼接好的参数即可
};

$.ajax(settings).done(function(response) {
    console.log(response);
});

方案3：使用FormData对象（适合带文件上传的场景）

通过FormData的append方法多次添加同键值，同时关闭jQuery的自动数据处理和内容类型设置：

// 构造FormData对象
var formData = new FormData();
formData.append('key', 'value1');
formData.append('key', 'value2');

var settings = {
    "url": "https://sample.com",
    "method": "POST",
    "timeout": 0,
    "headers": {
        "Authorization": basicauth
        // 不要手动设置Content-Type，浏览器会自动生成带boundary的正确值
    },
    "processData": false, // 禁止jQuery处理FormData对象
    "contentType": false, // 禁止jQuery覆盖Content-Type请求头
    "data": formData
};

$.ajax(settings).done(function(response) {
    console.log(response);
});

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