如何使用fetch正确向后端发送对象数组？

你之前的问题在于直接将数组传入URLSearchParams.append()，它会把数组转成[object Object],[object Object],...这种无法被后端解析的字符串，所以后端拿到的是null。以下是几种可行的解决方案：

方案1：将数组序列化为JSON字符串传递 #

把对象数组转成JSON字符串后作为单个参数传递，后端接收到后再解析成数组：

const urlParams = new URLSearchParams();
// 把数组转成JSON字符串
urlParams.append('selected_teams', JSON.stringify(selectedTeams));
fetch(`${backendUrl}?${urlParams}`)
  .then(response => response.json())
  .then(data => console.log(data));

后端需要对应处理：比如Node.js里用JSON.parse(req.query.selected_teams)，Java里用JSON工具类解析字符串参数。

方案2：拆分数组为重复参数（适配多数后端框架） #

如果后端支持重复参数名的数组解析（比如PHP、Spring Boot等），可以遍历数组，逐个添加参数：

子方式2.1：每个对象转JSON字符串，用数组参数名 #

const urlParams = new URLSearchParams();
selectedTeams.forEach(team => {
  urlParams.append('selected_teams[]', JSON.stringify(team));
});
fetch(`${backendUrl}?${urlParams}`)
  .then(...);

子方式2.2：展开对象属性，传递结构化参数 #

如果后端期望接收结构化的参数（比如selected_teams[0][team]=xxx），可以这样写：

const urlParams = new URLSearchParams();
selectedTeams.forEach((team, index) => {
  urlParams.append(`selected_teams[${index}][team]`, team.team);
  urlParams.append(`selected_teams[${index}][division]`, team.division);
});
fetch(`${backendUrl}?${urlParams}`)
  .then(...);

这种方式多数后端框架可以自动解析成对象数组，无需手动处理JSON。

方案3：改用POST请求传递JSON请求体（推荐复杂数据） #

如果允许修改请求方式，POST请求把数据放在请求体里是更合适的选择，避免URL长度限制，也更简洁：

fetch(backendUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ selected_teams: selectedTeams }),
})
.then(response => response.json())
.then(data => console.log(data));

后端只需解析JSON格式的请求体即可，比如Node.js用express.json()中间件，Java用@RequestBody注解接收。

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