这是我自己封装的post方法
在这里插入图片描述
这是我传给data的参数
在这里插入图片描述
但发现前台报错,我发现Form Data成为了这样的格式,把传入的参数都当成了key,但value部分却是null
在这里插入图片描述
在这里插入图片描述
找到的解决方法是导入qs库(qs库已经包含在axios中,不需要重新安装),把封装的post方法里面的“ JSON.stringify(data)
”改成 qs.stringify(data) 即可
在这里插入图片描述
在这里插入图片描述
这样前台Form Data就正常了,请求也成功
在这里插入图片描述

总结

因为这里我用axios处理的 contentTypeapplication/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来接收参数的

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐