码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-12-24 11:44:38      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:lte   tco   注解   for   cep   www   cal   action   icon   


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

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

标签:lte   tco   注解   for   cep   www   cal   action   icon   

原文地址:https://www.cnblogs.com/buptleida/p/12090244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!