当前位置: 首页 > news >正文

HTTP请求中的form data和request payload的区别

为什么80%的码农都做不了架构师?>>>   hot3.png

HTML <form> 标签的 enctype 属性

在下面的例子中,表单数据会在未编码的情况下进行发送:

<form action="form_action.asp" enctype="text/plain">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

定义和用法

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。

 

enctype值和意义:

application/x-www-form-urlencoded         在发送前编码所有字符(默认)

multipart/form-data                                        不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。

text/plain                                                           空格转换为 "+" 加号,但不对特殊字符编码。

 

HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中。通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式):

get请求:

RequestURL:http://127.0.0.1:8080/test/test.do?name=mikan&address=street
Request Method:GET
Status Code:200 OK
 
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Connection:keep-alive
Cookie:JSESSIONID=74AC93F9F572980B6FC10474CD8EDD8D
Host:127.0.0.1:8080
Referer:http://127.0.0.1:8080/test/index.jsp
User-Agent:Mozilla/5.0 (Windows NT 6.1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36
 
Query String Parameters
name:mikan
address:street
 
Response Headers
Content-Length:2
Date:Sun, 11 May 2014 10:42:38 GMT
Server:Apache-Coyote/1.1

 

Post请求:

RequestURL:http://127.0.0.1:8080/test/test.do
Request Method:POST
Status Code:200 OK
 
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:25
Content-Type:application/x-www-form-urlencoded
Cookie:JSESSIONID=74AC93F9F572980B6FC10474CD8EDD8D
Host:127.0.0.1:8080
Origin:http://127.0.0.1:8080
Referer:http://127.0.0.1:8080/test/index.jsp
User-Agent:Mozilla/5.0 (Windows NT 6.1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36
 
Form Data
name:mikan
address:street
 
Response Headers
Content-Length:2
Date:Sun, 11 May 2014 11:05:33 GMT
Server:Apache-Coyote/1.1

 

这里要注意post请求的Content-Type为application/x-www-form-urlencoded,参数是在请求体中,即上面请求中的Form Data。

 

而如果使用原生AJAX POST请求的话:

RequestURL:http://127.0.0.1:8080/test/test.do
Request Method:POST
Status Code:200 OK
 
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Connection:keep-alive
Content-Length:28
Content-Type:text/plain;charset=UTF-8
Cookie:JSESSIONID=C40C7823648E952E7C6F7D2E687A0A89
Host:127.0.0.1:8080
Origin:http://127.0.0.1:8080
Referer:http://127.0.0.1:8080/test/index.jsp
User-Agent:Mozilla/5.0 (Windows NT 6.1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36
 
Request Payload
name=mikan&address=street
 
Response Headers
Content-Length:2
Date:Sun, 11 May 2014 11:49:23 GMT
Server:Apache-Coyote/1.1

 

注意请求的Content-Type为text/plain;charset=UTF-8,而请求表单参数在RequestPayload中。

HTTP POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。

 

 

所以,在使用原生AJAX POST请求时,需要明确设置Request Header,即:

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 

服务器为什么会对表单提交和文件上传做特殊处理,因为表单提交数据是名值对的方式,且Content-Type为application/x-www-form-urlencoded,而文件上传服务器需要特殊处理,普通的post请求(Content-Type不是application/x-www-form-urlencoded)数据格式不固定,不一定是名值对的方式,所以服务器无法知道具体的处理方式,所以只能通过获取原始数据流的方式来进行解析。

jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,所以服务器能够正确解析,而使用原生ajax请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。

 

 

 

引用:http://blog.csdn.net/mhmyqn/article/details/25561535

http://www.w3school.com.cn/tags/att_form_enctype.asp

转载于:https://my.oschina.net/wzzz/blog/524277

相关文章:

  • Linux内核-协议栈-从BSD Socket接口层到传输层1
  • centos7全离线安装MongoDB3.2.8集群
  • Java基础学习18(类的多态性以及子父类之间的转换机制)
  • Python的三种基本数据类型
  • 窗体数据Excle导入功能详解
  • Linux -LAMP架构介绍
  • 2018-2019-1 20165226 20165310 20165315 实验二 固件程序设计
  • html5本地存储
  • SQL Join 图示
  • P117、面试题18:树的子结构
  • [CF543A]/[CF544C]Writing Code
  • IOS 百度地图点聚合使用
  • PHP和MySQL Web开发从新手到高手,第2天-怎样用zend创建PHP项目
  • 支持 Windows 10 最新 PerMonitorV2 特性的 WPF 多屏高 DPI 应用开发
  • 如何使用 Quagga BGP(边界网关协议)路由器来过滤 BGP 路由
  • @angular/forms 源码解析之双向绑定
  • 《Java编程思想》读书笔记-对象导论
  • 【5+】跨webview多页面 触发事件(二)
  • ESLint简单操作
  • Idea+maven+scala构建包并在spark on yarn 运行
  • Laravel深入学习6 - 应用体系结构:解耦事件处理器
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • log4j2输出到kafka
  • Logstash 参考指南(目录)
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • Python3爬取英雄联盟英雄皮肤大图
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • ubuntu 下nginx安装 并支持https协议
  • Vim 折腾记
  • 创建一个Struts2项目maven 方式
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 简析gRPC client 连接管理
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 走向全栈之MongoDB的使用
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (Oracle)SQL优化技巧(一):分页查询
  • (poj1.2.1)1970(筛选法模拟)
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (windows2012共享文件夹和防火墙设置
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (原创)攻击方式学习之(4) - 拒绝服务(DOS/DDOS/DRDOS)
  • (转)mysql使用Navicat 导出和导入数据库
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .libPaths()设置包加载目录
  • .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(二)...
  • .NET/C# 获取一个正在运行的进程的命令行参数