JQuery Ajax提交数组出现'id[]'键名异常问题求助

问题原因 #

jQuery默认会对数组类型的请求参数进行序列化，自动给键名添加[]后缀，以此告知服务器该参数是数组类型，所以你发送{id: id}时，服务器会收到{'id[]': [...]]}。

三种有效解决方法 #

1. 启用传统序列化模式 #

在$.ajax配置中添加traditional: true，禁用jQuery的数组序列化后缀规则：

function onlyUnique(value, index, self) {
    function isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    if(isNumeric(value)){
        return self.indexOf(value) === index;
    }
}; 

var id = masoid.filter(onlyUnique);

console.log(id);
$.ajax({
    url: deleteUrl, 
    type: 'POST',
    data: {id: id},
    traditional: true // 关键配置
});

此时服务器将直接收到id键对应的数据数组。

2. 发送JSON格式请求体 #

直接将数据序列化为JSON字符串，同时设置请求头为application/json，完全避免jQuery的自动序列化：

function onlyUnique(value, index, self) {
    function isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    if(isNumeric(value)){
        return self.indexOf(value) === index;
    }
}; 

var id = masoid.filter(onlyUnique);

console.log(id);
$.ajax({
    url: deleteUrl, 
    type: 'POST',
    data: JSON.stringify({id: id}), // 转为JSON字符串
    contentType: 'application/json' // 指定内容类型
});

注意：服务器需支持解析JSON请求体，比如Express框架需要提前配置express.json()中间件，这样req.body就能直接获取到{id: [...]]}格式的数据。

3. 将数组转为逗号分隔字符串 #

如果服务器仅接受字符串参数，可将数组转为逗号分隔的字符串，服务器收到后再拆分还原：

function onlyUnique(value, index, self) {
    function isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    if(isNumeric(value)){
        return self.indexOf(value) === index;
    }
}; 

var id = masoid.filter(onlyUnique).join(','); // 转为逗号分隔字符串

console.log(id);
$.ajax({
    url: deleteUrl, 
    type: 'POST',
    data: {id: id}
});

服务器端可通过id.split(',')将字符串重新转为数组。

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