前端如何传给后端一个JSON数组？

Question

searchList是一个JSON数组，[{"id":"1","name":"A"},{"id":"2","name":"B"},{"id":"3","name":"C"},{"id":"4","name":"D"},{"id":"5","name":"E"}]，后端controller如何接收

let params = new URLSearchParams();
params.append('infos', this.searchList);
this.axios({
    method: 'post',
    url: '*****',
    data: params,
}).then(function (response) {
    
}).catch(function (err) {
    
});

Answer 1

需要了解后端是json接收数据，还是formData接收数据的；看你的情况应该是formData接收；

axios使用formData传输写法：

import qs from 'qs'

//通过POST方式发送FormData格式的参数 的写法  
let data = await this.$http({//这里的 this.$http 就是axios 因为 我在vue原型上，挂载axios的时候，把axios改名为$http 了。
  url: 'xxxx',  //请求路径（接口）
  method: 'POST', //请求方式
  headers: { 'content-type': 'application/x-www-form-urlencoded' }, // 请求头，发送FormData格式的数据，必须是 这种请求头。
  data: qs.stringify({mobile: 'xxxx'}),  //发送请求要传的FormData参数。必须用 qs.stringify（）序列化一下。
});

1. content-type设置为application/x-www-form-urlencoded；
2. data需要转qs.stringify;

Answer 2

不管后端是啥语言,直接把 request body 里的内容读出来,的到的就是这个字符串吧
这样的话,前端 searchList 传一个对象数就可以了啊

Answer 3

不导入任何第三方库的话，用 FormData 还真的可以做到：

let params = new FormData();
params.append('infos[][a]', 1);
params.append('infos[][b]', 2);
params.append('infos[][a]', 3);
params.append('infos[][b]', 4);
// params == [{a: 1, b: 2}, {a: 3, b: 4}]

发ajax请求的时候加上这三个参数：

contentType: false,
processData: false,
cache : false,

希望能帮助到你。

Answer 4

如果你会传字符串的话可以把这个对象转换成字符串传给后端，JSON.stringify(obj)

Answer 5

定义一个xxxDTO：

@Data
public class xxxDTO{
    private Integer id;
    private String name;
}

然后在controller中用List<xxxDTO>来接收：

@PostMapping("/xxx/xxx")
public xxx xxxMethod(@RequestBody List<xxxDTO> searchList) {
}

---

为啥会被踩？如果是json字符串的话，传递时直接传递对象就行啊：

this.axios({
    method: 'post',
    url: '*****',
    data: JSON.parse(this.searchList),
})