前后端交互格式和类型总结(包含上传和下载)
get请求
没有请求体,没有Content-Type,传参集合是 Query String Parameters,就是url之后的一串字符。
后端针对这种url字符,一般都是用@RequestParam接收的。
post请求
请求头中常用的Content-Type有如下:text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif,application/x-www-form-urlencoded, multipart/form-data, application/json,application/xml 等。
其中:text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif, 都是常见的页面资源类型。
application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml 这四个是ajax的请求,表单提交或上传文件的常用的资源类型。
①application/x-www-form-urlencoded最常见的POST提交数据方式。原生form默认的提交方式(可以使用enctype指定提交数据类型)。它会让所有数据变成键值对的形式 key1=value1&key2=value2的形式,并且特殊字符需要转义成utf-8编号,如空格会变成 %20。使用这种类型时,字符串会拼在url后面,控制台里将放在Query String Parameters中发送。
②multipart/form-data一般是用来上传文件的。但是并不需要我们手动去更改Content-Type,更改了反而会报错。直接let fromdata = new FormData()。然后配置一下这个formdata,再将它放到axios的参数里即可,在浏览器里的请求体是Form Data。
for (const ele of this.files) {
//this.files是已经获取到的文件数组,这里演示的是多文件上传
formData.append('file',ele)
}
//通过get(key)/getAll(key)来获取对应的value;比如: formData.get("file"); // 获取key为name的第一个值。 formData.getAll("file"); // 返回一个数组,获取key为name的所有值。
//最后 this.$axios.post(`接口`,formData) //这样就会自动更改Content-Type为multipart/form-data
具体的实施还是要根据使用ui框架里的上传控件来决定,控件不够全面时去看一下源码,做个透传或者直接封装个自己的控件都可以。
③application/json,在http请求中,ContentType都是默认的值 application/x-www-form-urlencoded, 这种编码格式的特点是:name/value值对, 每组之间使用&连接,而name与value之间是使用 = 连接,比如 key=xxx&name=111&password=123456; 键值对一般的情况下是没有什么问题的,是很简单的json形式,比如如下:
{ a: 1, b: 2 }
它会解析成 a=1&b=2这样的,但是在一些复杂的情况下,比如需要传一个复杂的json对象,也就是对象嵌套数组的情况下,比如如下代码:
{ obj: [ { "name": 111, "password": 22 } ] }
这样复杂的对象,application/x-www-form-urlencoded这种形式传递的话, 会被解析成 obj[0]['name']=111&obj[0].['password']=2这样的。然后再转成json形式;
对于一些复制的数据对象,对象里面再嵌套数组的话,建议使用application/json传递比较好,后端那边也会要求使用application/json。因为他们那边不使用application/json的话,使用默认的application/x-www-form-urlencoded传递的话,开发那边先要解析成如上那样的,然后再解析成json对象,如果对于比上面更复杂的json对象的话,那么他们那边是不好解析的,所以直接json对象传递的话,对于他们来说更简单。通过json的形式将数据发送给服务器。json的形式的优点是它可以传递结构复杂的数据形式,比如对象里面嵌套数组这样的形式等。
请求体是通过请求头中的Content-Type来区分的:
Content-Type为application/x-www-form-urlencoded的请求体是formData ;Content-Type为application/json的请求体是request payload;Content-Type为multipart/form-data 的请求体是Form Data。
对于后端来说,是使用@RequestBody注解接收request payload形式的请求体参数;使用@RequestParam注解接收formData形式的请求体参数,如果是上传文件的话还要加一个multiplyPart来接收。