背景
axios 是一个易用、简洁且高效的 http 库,在 Vue 开发中常用于数据传输,笔者今年开发是就用的这个库。axios 提交请求时, headers 中的 content-type 如果和后台接收方式不一致,就会产生错误,比如后台收到的参数是 null ,或者是前端 js 报错等。
本文就来总结一下 axios 提交 post 请求时,axios post 请求类型和 SpringBoot 参数接收方式的对应关系。
方式一:JSON 数据提交
如果需要直接将前端的 JSON 数据提交,可以用 application/json
类型。
axios 发送 post 请求时,默认的 request 头域中 Content-Type 是 application/json
,此时后台 Controller 接收时必须使用 @RequestBody
注解接收,这适用于复杂 JSON 对象的传递,可以直接将前端的复杂对象转换为后台对象实例。
这种方式比较简单且好用,把页面操作的对象直接作为参数就可以:
this.$axios.post(submitUrl, targetData)
这里的 targetData 就是页面上的 JSON 对象,浏览器的头域类型为:
方式二: 表单提交
表单提交时,请求数据类型为 application/x-www-form-urlencoded
,此时后台接收参数不能用 @RequestBody
注解。
提交表单数据有两种方式,一种是用 FormData 拼接表单数据,一类是用 Qs 序列化。
方式三: FormData 方式
如果需要使用常规表单方式提交数据,可以使用 FormData,它的本质就是转换为常规的页面表单,以 &key=value
的形式组装请求参数。
比如这个批量删除操作:
后台接收参数 ids
是一个数组:
使用 FormData 提交时,请求头域为:
方式四:Qs 方式
例如,这个添加一个分组信息的功能,分组信息是一个普通的 js 对象,使用表单方式提交时,前台引入:
import Qs from 'qs';
提交代码时使用 stringfy
对参数对象序列化。
后台用普通对象接收,不能使用注解:
启示录
本文总结了 post 请求参数发送的三种方式,笔者一直用的是第一种,但是由于项目开发过程中,不同模块的开发人员,后台接收请求参数的方式不同,也碰到过后面两种接收方式。索性就认真对比了一下,彻底搞明白算了。
技术也是欺生的,下点决心搞明白了,也没啥,毕竟表单提交也不是什么新东西!