content-type常见类型辨析(以ajax与springmvc前后端交互为例)

作者 Lei da 日期 2019-11-21
content-type常见类型辨析(以ajax与springmvc前后端交互为例)

在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数据类型

1
2
3
4
类型格式:type/subtype(;parameter)? type
主类型,任意的字符串,如text,如果*代表所有;
子类型,任意字符串,如html,如果*代表所有;
可选,如charset参数。

常见的媒体格式类型如下

  • text/html : HTML格式
  • text/plain :纯文本格式
  • text/xml : XML格式
  • image/gif :gif图片格式
  • image/jpeg :jpg图片格式
  • image/png:png图片格式
    以application开头的媒体格式类型:
  • application/xhtml+xml :XHTML格式
  • application/xml : XML数据格式
  • application/atom+xml :Atom XML聚合格式
  • application/json : JSON数据格式
  • application/pdf :pdf格式
  • application/msword : Word文档格式
  • application/octet-stream : 二进制流数据(如常见的文件下载)
  • application/x-www-form-urlencoded :
    中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)

另外一种常见的媒体格式是上传文件之时使用的:

  • multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式

以上就是我们在日常的开发中,经常会用到的若干content-type的内容格式。接下来重点分析application/json、application/x-www-form-urlencoded和multipart/form-data,三个常用的内容格式

application/json

我们常用的json数据格式,使用ajax发送此种数据请求,如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
var dt={
"userName":"leida",
"userPasswd":"123456"
}
$.ajax({
type:"post",
url:"http://10.28.230.26:8080/login",
data:JSON.stringify(dt),
contentType: "application/json",
success : function(ret) {
console.log("logintest",ret)
}
})

注意dt是一个js对象,需要通过JSON.stringify将其序列化为json字符串,再封装进请求体,此时报文的entity body如下所示
image
此时,后台以如下形式接收参数(ParamDemo为自己定义的类)

1
2
3
4
@PostMapping("/testJson")
public Object testJson(@RequestBody ParamDemo paramDemo){
return paramDemo;
}

我遇到一个问题,若按照如下所示发送请求,即不使用JSON.stringify(以前用PHP后台的时候一向是这么搞)此时会报400不能正常解析

1
2
3
4
5
6
7
8
9
10
11
12
13
var dt={
"userName":"leida",
"userPasswd":"123456"
}
$.ajax({
type:"post",
url:"http://10.28.230.26:8080/login",
data:dt,
contentType: "application/json",
success : function(ret) {
console.log("logintest",ret)
}
})

看了一下http报文,数据对象dt以key1=val1&key2=val2 的方式进行编码,存在entity body中,如下图所示,就叫它键值对形式吧
image
实际上,该种情况是可以被解析的,此时后台使用@RequestBody注解并使用String类型可以接收该键值对字符串:userName=leida&userPasswd=123456,如下所示

1
2
3
4
@PostMapping("/testJson")
public Object testJson(@RequestBody String str){
return str;
}

综上所述,若data参数为JSON.stringify转化好的类型,则被正常序列化为json字符串;若data参数为一个普通js对象,则会被序列化为键值对参数字符串形式,即userName=leida&userPasswd=123456

application/x-www-form-urlencode

这是ajax的contenttype的默认值,用于处理表单,会将表单数据序列化为键值对参数字符串形式,如下图所示
image
可用HttpServletRequest 或者RequestBody 解析成字符串处理

application/form-data

它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var formdata = new FormData($("#form")[0]);
$.ajax({
type : "post",
url : "http://localhost:8080/roomInfoApply2",
data : formdata, // 你的formid
contentType:false,//ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
error : function(request) {
layer.alert('操作失败', {
icon: 2,
title:"提示"
});
},
success : function(ret) {
console.log(ret)
}
})

报文如下图所示
image
后台使用如下方式接收数据

1
2
3
4
5
6
7
8
9
10
11
12
@PostMapping("/roomInfoApply2")
public Object testFile(HttpServletRequest request, @RequestParam(value="confer_num",required=false) String num, @RequestParam(value="confer_date",required=false) String date, @RequestParam MultipartFile uploadFile) throws IOException {
System.out.println(uploadFile);
String newFileName = "123.xlsx";
String imgPath = request.getServletContext().getRealPath("/files/") + newFileName;
File newFile = new File(request.getServletContext().getRealPath("/files"), newFileName);
newFile.getParentFile().mkdirs();
uploadFile.transferTo(newFile);
//response.addHeader();
return num+date+imgPath;
//return testDataService.getAllTestData();
}