博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例)
在http报文的首部中，有一个字段Content-type，表示请求体（entity body）中的数据类型
类型格式：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发送此种数据请求，如下所示
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如下所示
此时，后台以如下形式接收参数（ParamDemo为自己定义的类）
@PostMapping("/testJson")
public Object testJson(@RequestBody ParamDemo paramDemo){
return paramDemo;
}
我遇到一个问题，若按照如下所示发送请求，即不使用JSON.stringify（以前用PHP后台的时候一向是这么搞）此时会报400不能正常解析
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中，如下图所示，就叫它键值对形式吧
实际上，该种情况是可以被解析的，此时后台使用@RequestBody注解并使用String类型可以接收该键值对字符串：userName=leida&userPasswd=123456，如下所示
@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的默认值，用于处理表单，会将表单数据序列化为键值对参数字符串形式，如下图所示
可用HttpServletRequest 或者RequestBody 解析成字符串处理
application/form-data
它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
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)
}
})
报文如下图所示
后台使用如下方式接收数据
@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();
}