博客搬家: 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前后端交互为例)的更多相关文章

  1. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. 从MVC到Ajax再到前后端分离的思考

    前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...

  3. SSM-网站后台管理系统制作(4)---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  4. ajax学习----json,前后端交互,ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  5. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

  6. 前后端交互之封装Ajax+SpringMVC源码分析

    为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...

  7. 一、Django前后端交互之Ajax和跨域问题

    一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...

  8. Ajax和SpringMVC之间JSON交互

    Ajax和SpringMVC之间的json数据传输有两种方式: 1.直接传输Json对象 2.将Json序列化成json字符串 1.直接传输Json对象 前端Ajax $(document).read ...

  9. 前端ajax的各种与后端交互的姿势

    前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...

随机推荐

  1. java8中的stream流遍历

    比较for循环.迭代器.java8Stream流遍历的不同 package cnom.test.testUtils; import java.io.Serializable; import java. ...

  2. CAS的实现原理

    CAS的全称是CompareAndSwap,比较并交换,是Java保证原子性的一种重要方法,也是一种乐观锁的实现方式. 它需要先提前一步获取旧值,然后进入此方法比较当下的值是否与旧值相同,如果相同,则 ...

  3. Fabric1.4:手动启动 first-network 网络(一)

    注意:本文所使用的 fabric 版本为 v1.4.3,与其它版本的网络存在差异. 手动启动 first-network 网络系列分为三部分: 手动启动 first-network 网络(一) 手动启 ...

  4. 详细解析Java虚拟机的栈帧结构

    欢迎关注微信公众号:万猫学社,每周一分享Java技术干货. 什么是栈帧? 正如大家所了解的,Java虚拟机的内存区域被划分为程序计数器.虚拟机栈.本地方法栈.堆和方法区.(什么?你还不知道,赶紧去看看 ...

  5. java 字典 map 和 list.forEach

    1.keySet  key 集 2.values value 集(为何不叫valueSet)... 3.entrySet key value 集 List<?> 循环 1.Iterable ...

  6. Java 项目热部署,节省构建时间的正确姿势

    上周末,帮杨小邪(我的大学室友)远程调试项目.SpringBoot 构建,没有热部署,改一下就得重启相关模块.小小的 bug ,搞了我一个多小时,大部分时间都还在构建上(特么,下次得收钱才行).我跟他 ...

  7. 开源导入导出库Magicodes.IE 导出教程

    要点 导出特性 如何导出Excel表头 如何导出数据.如何进行数据的切割.如何使用筛选器 导出特性 ExporterAttribute Name: 名称(当前Sheet 名称) HeaderFontS ...

  8. Java入门 - 面向对象 - 04.抽象类

    原文地址:http://www.work100.net/training/java-abstract.html 更多教程:光束云 - 免费课程 抽象类 序号 文内章节 视频 1 概述 2 Java抽象 ...

  9. 6、python基本数据类型之序列类型

    前言:python的基本数据类型可以分为三类:数值类型.序列类型.散列类型,本文主要介绍序列类型及其通用操作. 一.序列类型 1)字符串(str):用单引号('),双引号("),三引号(三单 ...

  10. typescript step by step two