form data和request payload的区别

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,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。

引用:<A title=http://blog.csdn.net/mhmyqn/article/details/25561535 href="http://blog.csdn.net/mhmyqn/article/details/25561535">http://blog.csdn.net/mhmyqn/article/details/25561535

<A title=http://www.w3school.com.cn/tags/att_form_enctype.asp href="http://www.w3school.com.cn/tags/att_form_enctype.asp">http://www.w3school.com.cn/tags/att_form_enctype.asp

时间: 2024-12-29 11:07:53

form data和request payload的区别的相关文章

HTTP请求中的Form Data与Request Payload的区别

前端开发中经常会用到AJAX发送异步请求,对于POST类型的请求会附带请求数据.而常用的两种传参方式为:Form Data 和 Request Payload. GET请求 使用get请求时,参数会以key=value的形式拼接在请求的url后面.例如: http://m.baidu.com/address/getlist.html?limit=50&offset=0&t=1502345139870 但是受限于请求URL的长度限制,一般参数较少时会使用get请求. POST请求 当参数数量

【转】form data和request payload的区别

HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp" enctype="text/plain">   <p>First name: <input type="text" name="fname" /></p>   <p>Last name: 

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

https://www.cnblogs.com/btgyoyo/p/6141480.html https://blog.csdn.net/qq_36719449/article/details/82820760 原文地址:https://www.cnblogs.com/zhangww/p/11306362.html

ajax请求中form data与request payload之间的区别

HTTP请求过程中,get请求:表单参数以name=value&name1=value1的形式附到url的后面:  post请求:表单参数是在请求体中,也是name=value&name1=value1的形式在请求体中. POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset

AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式

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=

AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

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=str

query string parameters 、 Form Data 、 Request Payload

微信小程序ajax向后台传递参数的时候总是报400错误 然后看了一下network 发现是query string parameters,但是我写的header如下 header:{ "Content-Type":'json' } 所以小程序总是报400 未完待续.... 附对照表 待完善 header:{ "Content-type":'json' }  Request Payload header:{ "Content-type":'x-ww

POST请求中参数以form data和request payload形式+清空数组方式

测试与服务端ajax时用的dva封装的request方法,而后端怎么也拿不到参数.结果返现参数在request payload里. HTTP POST表单请求提交时:Content-Typeapplication/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8. 表单提交数据是名值对的方式,而文件上传服务器需要特殊处理,普通的post请求数

Vue-resource中post请求将data数据以request payload转换为form data的形式

今天在做项目的时候 需要往api中发送一个json格式的对象,但是怎么改都不行,当然,使用的vue 的 http方法. 而且,开始使用时 vue-resource中post请求时的一个坑,vue-resource中post发送的数据默认以request payload的形式,而一般我们使用的都是form data的形式. 后来发现,只需要在main.js中加入: Vue.http.options.emulateJSON = true; Vue.http.options.headers = { '