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

在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数据类型

  1. 类型格式:type/subtype(;parameter)? type
  2. 主类型,任意的字符串,如text,如果*代表所有;
  3. 子类型,任意字符串,如html,如果*代表所有;
  4. 可选,如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发送此种数据请求,如下所示

  1. var dt={
  2. "userName":"leida",
  3. "userPasswd":"123456"
  4. }
  5. $.ajax({
  6. type:"post",
  7. url:"http://10.28.230.26:8080/login",
  8. data:JSON.stringify(dt),
  9. contentType: "application/json",
  10. success : function(ret) {
  11. console.log("logintest",ret)
  12. }
  13. })

注意dt是一个js对象,需要通过JSON.stringify将其序列化为json字符串,再封装进请求体,此时报文的entity body如下所示



此时,后台以如下形式接收参数(ParamDemo为自己定义的类)

  1. @PostMapping("/testJson")
  2. public Object testJson(@RequestBody ParamDemo paramDemo){
  3. return paramDemo;
  4. }

我遇到一个问题,若按照如下所示发送请求,即不使用JSON.stringify(以前用PHP后台的时候一向是这么搞)此时会报400不能正常解析

  1. var dt={
  2. "userName":"leida",
  3. "userPasswd":"123456"
  4. }
  5. $.ajax({
  6. type:"post",
  7. url:"http://10.28.230.26:8080/login",
  8. data:dt,
  9. contentType: "application/json",
  10. success : function(ret) {
  11. console.log("logintest",ret)
  12. }
  13. })

看了一下http报文,数据对象dt以key1=val1&key2=val2 的方式进行编码,存在entity body中,如下图所示,就叫它键值对形式吧



实际上,该种情况是可以被解析的,此时后台使用@RequestBody注解并使用String类型可以接收该键值对字符串:userName=leida&userPasswd=123456,如下所示

  1. @PostMapping("/testJson")
  2. public Object testJson(@RequestBody String str){
  3. return str;
  4. }

综上所述,若data参数为JSON.stringify转化好的类型,则被正常序列化为json字符串;若data参数为一个普通js对象,则会被序列化为键值对参数字符串形式,即userName=leida&userPasswd=123456

application/x-www-form-urlencode

这是ajax的contenttype的默认值,用于处理表单,会将表单数据序列化为键值对参数字符串形式,如下图所示



可用HttpServletRequest 或者RequestBody 解析成字符串处理

application/form-data

它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。

  1. var formdata = new FormData($("#form")[0]);
  2. $.ajax({
  3. type : "post",
  4. url : "http://localhost:8080/roomInfoApply2",
  5. data : formdata, // 你的formid
  6. contentType:false,//ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
  7. processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
  8. error : function(request) {
  9. layer.alert('操作失败', {
  10. icon: 2,
  11. title:"提示"
  12. });
  13. },
  14. success : function(ret) {
  15. console.log(ret)
  16. }
  17. })

报文如下图所示



后台使用如下方式接收数据

  1. @PostMapping("/roomInfoApply2")
  2. 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 {
  3. System.out.println(uploadFile);
  4. String newFileName = "123.xlsx";
  5. String imgPath = request.getServletContext().getRealPath("/files/") + newFileName;
  6. File newFile = new File(request.getServletContext().getRealPath("/files"), newFileName);
  7. newFile.getParentFile().mkdirs();
  8. uploadFile.transferTo(newFile);
  9. //response.addHeader();
  10. return num+date+imgPath;
  11. //return testDataService.getAllTestData();
  12. }

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. 机器学习之路--Numpy

    常用代码 ndarray.dtype 数据类型必须是一样的 常用代码 import numpy #numpy读取文件 world_alcohol = numpy.genfromtxt("wo ...

  2. 1059 C语言竞赛 (20 分)C语言

    C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份"神秘大奖"(比如很巨大的一本学生研究论文集--). 1 ...

  3. 1048 数字加密 (20 分)C语言

    本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对 13 取余--这里用 J 代表 ...

  4. k8s-整体概述和架构

    1.Kubernetes是什么 Kubernetes是一个轻便的和可扩展的开源平台,用于管理容器化应用和服务.通过Kubernetes能够进行应用的自动化部署和扩缩容.在Kubernetes中,会将组 ...

  5. 使用JavaMail发送邮件(含文本/附件/图片)的工具类

    记录利用公司内搭建的smtp邮件服务器,使用javax mail发送邮件的程序 package com.test.mailTest; import java.util.Date; import jav ...

  6. cogs 1298. 通讯问题 Tarjan

    1298. 通讯问题 ★★   输入文件:jdltt.in   输出文件:jdltt.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 一个篮球队有n个篮球队员,每个队员 ...

  7. Logback源码分析

    在日常开发中经常通过打印日志记录程序执行的步骤或者排查问题,如下代码类似很多,但是,它是如何执行的呢? package chapters; import org.slf4j.Logger; impor ...

  8. (分块)Holes CodeForces - 13E

    题意 n(n≤105)个洞排成一条直线,第ii个洞有力量值ai,当一个球掉进洞ii时就会被立刻弹到i+ai,直到超出n.进行m(m≤105)次操作: ·修改第i个洞的力量值ai. ·在洞xx上放一个球 ...

  9. 【WPF学习】第十章 WPF布局示例

    前几章用了相当大的篇幅研究有关WPF布局容器的复杂内容.在掌握了这些基础知识后,就可以研究几个完整的布局示例.通过研究完整的布局示例,可更好的理解各种WPF布局概念在实际窗口中的工作方式. 一.列设置 ...

  10. Bootstrap Table的使用详解

    Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能.接下来我们来介绍B ...