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和控制器 ...
随机推荐
- 机器学习之路--Numpy
常用代码 ndarray.dtype 数据类型必须是一样的 常用代码 import numpy #numpy读取文件 world_alcohol = numpy.genfromtxt("wo ...
- 1059 C语言竞赛 (20 分)C语言
C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份"神秘大奖"(比如很巨大的一本学生研究论文集--). 1 ...
- 1048 数字加密 (20 分)C语言
本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对 13 取余--这里用 J 代表 ...
- k8s-整体概述和架构
1.Kubernetes是什么 Kubernetes是一个轻便的和可扩展的开源平台,用于管理容器化应用和服务.通过Kubernetes能够进行应用的自动化部署和扩缩容.在Kubernetes中,会将组 ...
- 使用JavaMail发送邮件(含文本/附件/图片)的工具类
记录利用公司内搭建的smtp邮件服务器,使用javax mail发送邮件的程序 package com.test.mailTest; import java.util.Date; import jav ...
- cogs 1298. 通讯问题 Tarjan
1298. 通讯问题 ★★ 输入文件:jdltt.in 输出文件:jdltt.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 一个篮球队有n个篮球队员,每个队员 ...
- Logback源码分析
在日常开发中经常通过打印日志记录程序执行的步骤或者排查问题,如下代码类似很多,但是,它是如何执行的呢? package chapters; import org.slf4j.Logger; impor ...
- (分块)Holes CodeForces - 13E
题意 n(n≤105)个洞排成一条直线,第ii个洞有力量值ai,当一个球掉进洞ii时就会被立刻弹到i+ai,直到超出n.进行m(m≤105)次操作: ·修改第i个洞的力量值ai. ·在洞xx上放一个球 ...
- 【WPF学习】第十章 WPF布局示例
前几章用了相当大的篇幅研究有关WPF布局容器的复杂内容.在掌握了这些基础知识后,就可以研究几个完整的布局示例.通过研究完整的布局示例,可更好的理解各种WPF布局概念在实际窗口中的工作方式. 一.列设置 ...
- Bootstrap Table的使用详解
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能.接下来我们来介绍B ...