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

Posted 2021-03-20 数小钱钱的种花兔

---

博客搬家: 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();
}