博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【转】form data和request payload的区别
阅读量:5758 次
发布时间:2019-06-18

本文共 4070 字,大约阅读时间需要 13 分钟。

HTML <form> 标签的 enctype 属性

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

First name:

Last name:

 

定义和用法

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

 

直接ajax提交input:file ,不通过form表单提交

$('#myfile').change(function(){    var formData = new FormData();    formData.append('photo', $('#myfile')[0].files[0]);    $.ajax({        url : 'http://www.toutiao.com/abc',        type : 'POST',        cache : false,        data : formData,        processData : false,        contentType : false,        success:function(){},        error:function(){}    });});

 

转载地址:http://nsvkx.baihongyu.com/

你可能感兴趣的文章
苹果公司透露Siri新发音引擎的内部原理
查看>>
GCM 3.0采用类似方式向Android、iOS和Chrome发送消息
查看>>
如何成为一家敏捷银行
查看>>
MongoDB主动撤回SSPL的开源许可申请
查看>>
Oracle在JavaOne上宣布Java EE 8将会延期至2017年底
查看>>
使用Prometheus监控Cloudflare的全球网络
查看>>
Javascript 深入浅出原型
查看>>
VS 2019要来了,是时候了解一下C# 8.0新功能
查看>>
简单之极,搭建属于自己的Data Mining环境(Spark版本)
查看>>
Web Storage--HTML5本地存储
查看>>
数据库自动化:DBA和DevOps的双赢
查看>>
Ruby 2.5.0概览
查看>>
如何通过解决精益问题提高敏捷团队生产力
查看>>
阿里云数据库产品总监何云飞:云服务是影响未来10~20年的事
查看>>
Comment2Wechat —— Typecho 插件
查看>>
Apache下.htaccess文件配置及功能介绍
查看>>
Magento XML cheatsheet
查看>>
Egg 2.19.0 发布,阿里开源的企业级 Node.js 框架
查看>>
sap的function module发布成web service后fm再次修改的处理 ...
查看>>
Kubernetes 弹性伸缩全场景解析 (四)- 让核心组件充满弹性 ...
查看>>