使用axios的post方式传参遇到的坑(@RequestParam和@RequestBody的区别)
这是我自己封装的post方法
这是我传给data的参数
但发现前台报错,我发现Form Data成为了这样的格式,把传入的参数都当成了key,但value部分却是null
找到的解决方法是导入qs库(qs库已经包含在axios中,不需要重新安装),把封装的post方法里面的“ JSON.stringify(data)
”改成 qs.stringify(data) 即可
这样前台Form Data就正常了,请求也成功
总结
因为这里我用axios处理的 contentType 为 application/x-www-form-urlencoded
而且后端是用 @RequestParam 来接收前端传过来的参数的,所以post传参的时候用的是 qs.stringify(data) ,若后台使用 @RequestBody,则应该使用 JSON.stringify(data) 来转化格式。其导致这个坑的最主要原因就是后端中 @RequestParam 和**@RequestBody**的差别所致.
@RequestParam 和 @RequestBody 的区别:
使用@RequestParam:主要处理contentType为application/x-www-form-urlencoded的数据(默认)
使用@ResponseBody:主要处理contentType不为application/x-www-form-urlencoded的数据
在ajax中要指明contentType:“application/json;charset=UTF-8”,data:JSON.stringify(json数组);
使用@RequestParam:要指明前端传过来的参数名并与其对应
使用@RequestBody:直接对象接收,属性名要与前端传过来的数据的key值对应
按F12看一下Network里对应请求:
使用@RequestParam:Content-Type为application/x-www-form-urlencoded,参数在FormData中
使用@RequestBody:Content-Type为application/json,参数在Request PayLoad中
最后还有就是,GET请求是不可以用@RequestBody来接收参数的