1.背景介绍

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种编码方式。

2.知识剖析

协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。但是,数据发送出去,还要服务端解析成功才有意义。

服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

3.常见问题

常用的POST 提交数据方式有哪些?

4.解决方案

四种常见的 POST 提交数据方式:

1.application/x-www-form-urlencoded

2.multipart/form-data

3.application/json

4.text/xml

4.1 application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype属性,那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

在POST提交数据中Content-Type 被指定为 application/x-www-form-urlencoded;提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。很多时候,我们用 Ajax 提交数据时,也是使用这种方式。

xhr.open("POST","http://www.example.com",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.2 multipart/form-data

这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctype 等于这个值。这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。上面提到的这两种 POST 数据的方式,都是浏览器原生支持的。

xhr.open("POST","http://www.example.com",true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");

4.3 application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

xhr.open("POST","http://www.example.com",true);
xhr.setRequestHeader("Content-Type", "application/json");

  

4.4 text/xml

它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范,它的使用也很广泛,能很好的支持已有的 XML-RPC 服务。不过,XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。

xhr.open("POST","http://www.example.com",true);
xhr.setRequestHeader("Content-Type", "text/xml");

  

5.编码实战

6.扩展思考

我们应该选择哪种编码方式呢?

1.选择与后端约定好的提交方式

2.看提交的数据类型,如果提交文件的话选择multipart/form-data

7.更多讨论

GET和POST有哪些区别?

传言1:GET方式对长度有限制;POST方式对长度没限制。

(1).因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。

(2).理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。

传言2:GET是从服务器上获取数据;POST是向服务器传送数据。

回答:GET方式就没有向服务器传送数据?那么URL中的?子句送的是什么?不论是GET还是POST,都可以向服务器传送数据,只不过传送数据的位置不同,GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中;不论是GET还是POST,都要从服务器上获取数据,关键的问题是:

GET的主要任务是获得数据,但在获得数据前也可以向服务器提交一些数据;

POST的主要任务是提交数据,但在提交数据之后服务器也会向用户端返回一些显示用的数据。

传言3:GET不安全,用户能从地址栏上看到传送的数据;POST安全,用户不能从地址栏上看到传送的数据。

回答:通过GET提交数据,用户名和密码将明文出现在URL上,因为(1)登录页面有可能被浏览器缓存,(2)其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了。POST方式看不到传送的数据是因为IE浏览器做了限制。如果你通过第三方工具看到了POST方式传送的数据,你还能说POST方式是安全的吗?理论上说GET和POST方式都不安全,要不就用不着研究HTTPS了。

8.参考文献

参考一:四种常见的 POST 提交数据方式

参考二:浅谈HTTP中Get与Post的区别

参考三:HTTP协议POST请求问题总结

视频资料

http://v.qq.com/iframe/player.html?vid=i05205vnhr5&tiny=0&auto=0

PPT资料

https://ptteng.github.io/PPT/PPT/js-05-EnctypeofPOST.html

更多资料https://ptteng.github.io/PPT/webIndex.html

post提交的数据几种编码格式的更多相关文章

  1. post提交的数据有哪几种编码格式?能否通过URL参数获取用户账户密码

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [post提交的 ...

  2. asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

    MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交

  3. Http协议详解,获取doPost,doGet提交的数据,以及编码问题

    一 什么是Http协议 http协议: 浏览器客户端 和  服务器端 之间数据传输的格式规范 二 如何查看Http协议的内容 1)使用火狐的firebug插件(右键->firebug->网 ...

  4. Post请求的两种编码格式:application/x-www-form-urlencoded和multipart/form-data

    在常见业务开发中,POST请求常常在这些地方使用:前端表单提交时.调用接口代码时和使用Postman测试接口时.我们下面来一一了解: 一.前端表单提交时 application/x-www-form- ...

  5. HTTP POST 请求的两种编码格式:application/x-www-form-urlencoded 和 multipart/form-data

    在常见业务开发中,POST 请求常常在这些地方使用:前端表单提交时.调用接口代码时和使用 Postman 测试接口时.我们下面来一一了解: 一.前端表单提交时 application/x-www-fo ...

  6. 解决Yii2 启用_csrf验证后POST数据仍提示“您提交的数据无法验证”

    一 CSRF 概念 CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XS ...

  7. ngResource提交json数据如何带参数

    ngResource提交json数据如何带参数 直接使用ngResource和REST服务接口交互可以让程序显得简洁,前提是配置好跨域和OPTIONS请求的支持,与此同时,如果需要带些额外的参数,有两 ...

  8. SQL Server 利用批量(batchsize)提交加快数据生成/导入

    在最小化日志操作解析,应用的文章中有朋友反映生成测试数据较慢.在此跟大家分享一个简单的应用,在生成数据过程中采用批量提交的方式以加快数据导入. 此应用不光生成测试数据上,在BCP导入数据中,复制初始化 ...

  9. Json传递数据两种方式(json大全)

    1.Json传递数据两种方式(json大全)----------------------------字符串 var list1 = ["number","name&quo ...

随机推荐

  1. 团队作业5——测试与发布(alpha阶段)

    Deadline: 2018-5-9 10:00PM,以提交至班级博客时间为准. 根据以下要求,完成对本团队项目的测试与发布. 测试 请根据团队项目中软件的需求文档.功能说明.系统设计和测试计划,写出 ...

  2. PHP中多个文件包含的问题 (一)

    使用require或者include来包含文件时,包含的文件的内容相对性,这个很容易搞混,所以记录一下. 这个相对性包括 __DIR__,__FILE__,$_SERVER['PHP_SELF'],$ ...

  3. 【学习总结】Git学习-参考廖雪峰老师教程五-远程仓库

    学习总结之Git学习-总 目录: 一.Git简介 二.安装Git 三.创建版本库 四.时光机穿梭 五.远程仓库 六.分支管理 七.标签管理 八.使用GitHub 九.使用码云 十.自定义Git 期末总 ...

  4. IntelliJ IDEA/WebStrom破解及JDK配置

    title: IntelliJ IDEA/WebStrom破解及JDK配置 (一)破解 破解步骤 第一步:下载破解补丁 第二步:修改配置文件 第三步:重启IntelliJ IDEA/WebStrom填 ...

  5. HTTP之referrer

    我们知道,在页面引入图片.JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求,浏览器一般都会给这些请求头加上表示来源的 Referrer 字段.Referrer 在分析用户来源时 ...

  6. 三、taro路由及设计稿及尺寸单位

    一.路由配置 路由配置跟小程序一样,在入口文件的 config 配置中指定好 pages 通过taro API 跳转,详见导航 // 跳转到目的页面,打开新页面 Taro.navigateTo({ u ...

  7. C#复习笔记(4)--C#3:革新写代码的方式(查询表达式和LINQ to object(下))

    查询表达式和LINQ to object(下) 接下来我们要研究的大部分都会涉及到透明标识符 let子句和透明标识符 let子句不过是引入了一个新的范围变量.他的值是基于其他范围变量的.let 标识符 ...

  8. Java 里如何实现线程间通信(转载)

    出处:http://www.importnew.com/26850.html 正常情况下,每个子线程完成各自的任务就可以结束了.不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程 ...

  9. Chrome 浏览器的简单设置 无痕模式 暗黑模式 自定义用户目录

    1. Chrome73 新增加了暗黑模式 可以通过修改快捷方式的方式来默认开启方法如下 1.1 关闭浏览器 2.2 鼠标焦点定位到任务栏 Chrome 图标处, 并且按住shift 按键 执行右键操作 ...

  10. laravel实现批量添加数据

    在使用laravel eloquent进行数据库操作的时候惊讶的发现这货居然不支持批量添加,看到网上很多人在循环里进行数据库插入操作来实现批量添加,我想说这样做是很损失性能滴!好在框架的DB门面里的i ...