content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: 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前后端交互为例)的更多相关文章
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 从MVC到Ajax再到前后端分离的思考
前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...
- SSM-网站后台管理系统制作(4)---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- ajax学习----json,前后端交互,ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...
- 前后端交互之封装Ajax+SpringMVC源码分析
为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
- Ajax和SpringMVC之间JSON交互
Ajax和SpringMVC之间的json数据传输有两种方式: 1.直接传输Json对象 2.将Json序列化成json字符串 1.直接传输Json对象 前端Ajax $(document).read ...
- 前端ajax的各种与后端交互的姿势
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...
随机推荐
- CF1277A. Happy Birthday, Polycarp! 题解 枚举/数位DP
题目链接:http://codeforces.com/contest/1277/problem/A 题目大意: 求区间 \([1,n]\) 范围内有多少只包含一个数字的数. 比如:\(1,77,777 ...
- 用TensorFlow做图像识别(python)
一.TensorFlow简介 TensorFlow是由谷歌开发的一套机器学习的工具,使用方法很简单,只需要输入训练数据位置,设定参数和优化方法等,TensorFlow就可以将优化结果显示出来,节省了很 ...
- Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...
- C#调用Matlab生成的Dll
问题描述:最近开发需要调用matlab生成的DLL,在New MWNumericArray 对象的时候报错,提示未将对象引用到对象的实例. 问题分析:因为MWArray.dll是Matlab提供的DL ...
- PHP实现取得HTTP请求的原文【转】
本文实例讲述了PHP实现取得HTTP请求的原文的方法,具体步骤如下: 1. 取得请求行:Method.URI.协议 可以从超级变量$_SERVER中获得,三个变量的值如下: $_SERVER['REQ ...
- Java类成员之内部类
内部类含义: 在Java中允许一个类的定义位于另一个类的内部,前者称为内部类,后者称为外部类. Inner class 一般用在定义它的类或语句块之内,在外部引用它时必须给出完整的名称. Inner ...
- 三、Spring Cloud之软负载均衡 Ribbon
前言 上一节我们已经学习了Eureka 注册中心,其实我们也使用到了Ribbon ,只是当时我们没有细讲,所以我们现在一起来学习一下Ribbon. 什么是Ribbon 之前接触到的负载均衡都是硬负载均 ...
- Unity 基于Cinemachine计算透视摄像机在地图中的移动范围
Unity中Cinemachine的基础功能介绍可详见之前写的博客: https://www.cnblogs.com/koshio0219/p/11820654.html 本篇的重点是讨论,在给定规则 ...
- 什么是aPaas?aPaas与低代码又是如何促进应用程序开发现代化的?
从软件即服务(SaaS)到基础设施即服务(IaaS),云计算的兴起使“一切皆服务”(XaaS)模型得以泛滥,而aPaaS可能是这些模型中最鲜为人知的模型.随着aPaaS市场预计将从2018年的近90亿 ...
- Qt Installer Framework翻译(0)
本人主攻C++和Qt. 以前一直看人家的博客,找资料学习.今天我也终于开博客啦. 最近在研究Qt install framework(IFW)应用程序安装框架. google也没发现有正儿八经的官方文 ...