表单提交enctype参数详解之:application/x-www-form-urlencode和multipart/form-data

application/x-www-form-urlencode

我们在提交表单的时候,form表单参数中会有一个enctype的参数。enctype指定了HTTP请求的Content-Type。
默认情况下,HTML的form表单的enctype=application/x-www-form-urlencoded。
application/x-www-form-urlencoded是指表单的提交,并且将提交的数据进行urlencode。默认情况下,我们所有的表单提交都是通过这种默认的方式实现的。

在火狐浏览器下,我们可以看一下提交数据的过程:
1.png
我们可以看到Content-type:

Content-Type      
application/x-www-form-urlencoded; charset=UTF-8  

然后继续看一下原始请求数据,原始的请求数据被urlencode了。
2.png
Ajax默认也是通过HTTP application/x-www-form-urlencoded提交数据。可以看下Jquery的源码:
3.png

multipart/form-data

一般情况下,我们如果要在表单中上传文件,一般会将form的enctype参数设置为multipart/form-data。这种方式只支持POST的请求方式。
Contype-Type=multipart/form-data情况的时候,都会通过一个特殊的字符串来将原始POST数据进行分割。
我们可以看到下面的请求中Content-type的类型:

Content-Type      
multipart/form-data; boundary=---------------------------66841812532223  

其中boundary=---------------------------66841812532223,为分割符号。
其中数据块开始的分隔符 =={boundary} 会在前面加上“==”
数据块结束的分隔符 =={boundary}== 会在后面加上“==”
4.png
继续看下原始数据,我们可以清晰的看到,各种请求数据被boundary值进行了分割。
5.png
虽然这些知识点很早就知道了,但是知其然知其所以然可以让我们深入每一个技术细节。

application/json

有些时候,我们会直接提交Content-type是json数据格式的请求。
例如:

var data = {'title':'test', 'sub' : [1,2,3]};  
$http.post(url, data).success(function(result) {  ...  
});  

请求:

POST http://www.example.com HTTP/1.1  
Content-Type: application/json;charset=utf-8  {"title":"test","sub":[1,2,3]}  

这种情况下,请求的Content-Type是Json的数据格式,http body中的内容就是请求的json数据。
如果是php的话,需要通过 php://input来接收POST中的原始数据信息。
如果是Java,则需要下面的方式来读取HTTP 请求BODY中的数据

protected void processRequest(HttpServletRequest request,HttpServletResponse response) {try {request.setCharacterEncoding("UTF-8");int size = request.getContentLength();  System.out.println(size);  InputStream is = request.getInputStream();  byte[] reqBodyBytes = readBytes(is, size);  String res = new String(reqBodyBytes);  System.out.println(res);  response.setContentType("text/html;charset=UTF-8");  response.setCharacterEncoding("UTF-8");  response.getOutputStream().write(res.getBytes("utf-8"));  response.flushBuffer();  } catch (Exception e) {}
}public static final byte[] readBytes(InputStream is, int contentLen) {if (contentLen > 0) {int readLen = 0;  int readLengthThisTime = 0;  byte[] message = new byte[contentLen];  try {while (readLen != contentLen) {readLengthThisTime = is.read(message, readLen, contentLen - readLen);if (readLengthThisTime == -1) {// Should not happen.  break;}readLen += readLengthThisTime;}return message;} catch (IOException e) {// Ignore  // e.printStackTrace();  }  }return new byte[] {};  
}  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

内网端口映射工具

由于开发微信需要一个公网域名,需要将本地端口映射到外网域名,最热的工具是ngrok,但被微信屏蔽了,这里使用的是natapp,环境是mac,windows下可使用nat123、花生壳等工具实现同样功能。 简单记录一下过程。 …

iOS----------iPhone导出手机所有短信

第一步:手机连接到itunes 选择本电脑备份 备份的时候不要加密 然后立即备份 第二步:前往文件夹,找到itunes的备份路径~/Library/Application Support/MobileSync/Backup 在这目录下搜索 3d0d开头的文件,这就是 iPhone 短信的…

跨站点脚本(XSS)

1. 简介 跨站点脚本(XSS)是当前web应用中最危险和最普遍的漏洞之一。安全研究人员在大部分最受欢迎的网站,包括Google, Facebook, Amazon, PayPal等网站都发现这个漏洞。如果你密切关注bug赏金计划,会发现报道最多的问题属于XSS。为了避免跨站脚本,浏览器也有自己的过滤器,但安…

CSRF攻击原理及防御

CSRF攻击原理及防御 一、CSRF攻击原理 CSRF是什么呢?CSRF全名是Cross-site request forgery,是一种对网站的恶意利用,CSRF比XSS更具危险性。想要深入理解CSRF的攻击特性我们有必要了解一下网站session的工作原理。   session我想大家都不…

H3C FTP配置示例

转载于:https://www.cnblogs.com/fanweisheng/p/11156596.html

windows10系统下MongoDB的安装及环境配置

windows10系统下MongoDB的安装及环境配置: MongoDB的安装 下载地址: https://www.mongodb.com/download-center (这是windows10环境下的教程!请注意!) 下载后,我们点击mongodb-win32-x86_64-2008plus-ssl-3.4.3-signed…

CSS clip:rect矩形剪裁功能

CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。 根据Dreamweaver的自动提示&a…

Node.js 部署免费/自动续订 HTTPS

统计了使用 Chrome 浏览器,访问的站点统计中,HTTPS 使用率的增长情况:而在今年 2 月份,Chrome 团队也宣布,将在 2018 年 7 月份发布的 Chrome 68 中,将没有部署 HTTPS 的网站标记为 "不安全"。简…

MVVM原理还你

众所周知当下是MVVM盛行的时代,从早期的Angular到现在的React和Vue,再从最初的三分天下到现在的两虎相争。 无疑不给我们的开发带来了一种前所未有的新体验,告别了操作DOM的思维,换上了数据驱动页面的思想,果然时代的进…

CSS页面布局解决方案大全

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1)使用inline-blocktext-align&#xff…

AES加密算法的学习笔记

AES简介高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。 对称加密算法也就是加密和解密用相同的密钥,具体的加密流程如下图: 下面简单介绍下各个部分的作用与意义: 明文P没…

前端 crypto-js aes 加解密

背景 前段时间公司做项目,该项目涉及到的敏感数据比较多,经过的一波讨论之后,决定前后端进行接口加密处理,采用的是 AES BASE64 算法加密~ 网上关于 AES 对称加密的算法介绍看上一篇! 具体实现 其实搞懂了是怎么一回事…

随笔记录(2019.7.10)

1、ISO/OSI 网络七层参考模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 2、 TCP/IP 网络四层模型和五层模型 四层模型: 网络接口层 网络层 传输层 应用层 五层模型: 物理层 数据链路层 网络层 传输层 应用层 3、 协议簇 (1&a…

Highcharts的饼图大小的控制

在Highcharts中,饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多,并且距离切片较远时,饼图就会被压缩的很小。解决这个问题,有以下几种方法:&…

document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。 DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。…

Javascript重温OOP之原型与原型链

prototype原型对象 每个函数都有一个默认的prototype属性,其实际上还是一个对象,如果被用在继承中,姑且叫做原型对象。 在构造函数中的prototype中定义的属性和方法,会被创建的对象所继承下来。举个栗子: function F()…

webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Git或者cmd中输入下面这段代码, 通过全局…

小白十分钟-推荐导航栏

大腿绕道&#xff0c;给小白学习用&#xff0c;上代码 <div class"list"><div class"infor"><ul class"left"><li><a href"">限时特价</a></li><li><a href"">热门推…

掌握ES6/ES2015核心内容

ECMAScript 6&#xff08;以下简称ES6&#xff09;是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的&#xff0c;所以又称ECMAScript 2015。 也就是说&#xff0c;ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性&#xff0c;但越来越多的程序员…

转:canvas--放大镜效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠标事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…