表单提交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。为了避免跨站脚本,浏览器也有自己的过滤器,但安…

spring webscoket服务端使用记录

记录spring4中websocket的使用方式 pom jar包配置 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>${spring.version}</version> </dependency> <depen…

MVC是什么?(转载)

MVC (Modal View Controler)本来是存在于Desktop程序中的&#xff0c;M是指数据模型&#xff0c;V是指用户界面&#xff0c;C则是控制器。使用MVC的目的是将M和V的实现代码分离&#xff0c;从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来…

CSRF攻击原理及防御

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

H3C FTP配置示例

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

用dotnet自带的mail类发邮件出现的问题

在使用dotnet自带的mail类发送邮件的时候&#xff0c;因为默认的smtp端口是25&#xff0c;如果更改了smtp的端口号&#xff0c;则需加上MailMessage msg &#xff1d; new MailMessage();msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserverport&…

Angular CLI ng 指令指南

Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装

spring源码阅读(1/4) - Bean生成

上午去缴了上次没带驾驶证的扣分罚款&#xff0c;最近在图书馆没事就看曾国藩家书&#xff0c;曾国藩说人要明强。光强没有用&#xff0c;你要明强。也就是说要强的有道理。曾国藩又说&#xff0c;做学问不能做死学问&#xff0c;做学问其实很重要的事就是能懂得孝悌&#xff0…

NodeJS解决跨域问题:Access-Control-Allow-Origin

今天在玩vue-resource时&#xff0c;后台使用nodejs来提供数据&#xff0c;由于需要跨域&#xff0c;在网上也找到了解决方法。 vue-resource代码(其实就是ajax技术)&#xff1a; this.$http.get({url:"http://localhost:3000/getdata"}) .then(function (data) {co…

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

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

Net EF to MySQL生成edmx文件时报错:StrongTypingException:表“TableDetails中列“IsPrimaryKey的值为DBNull...

使用Net写项目&#xff0c;数据库用的MySQL&#xff0c;EF生成edmx文件时&#xff0c;报错&#xff0c;StrongTypingException:表“TableDetails"中列“IsPrimaryKey"的值为DBNull。 解决方法&#xff1a; 1.重启MySQL服务 2.MySQL中运行下以下命令&#xff1a; use …

MongoDB之在mac上设置环境变量

要下班&#xff0c;简介做个笔记。设置环境变量在基于unix/linux的操作系统下进行程序开发&#xff0c;使用环境变量将会方便。通过设置环境变量将可以在任意目录通过输入程序名来执行设定目录下的程序。不需要通过cd将工作目录改变到程序目录再执行程序。而且免去了输入"…

popup a new windows

popup a new windows window.open(url, newwindow, height500, width850, top0, left0, toolbarno, menubarno, scrollbarsno, resizableno,locationno, statusno); 转载于:https://www.cnblogs.com/sandy_liao/archive/2010/06/24/1764533.html

CSS clip:rect矩形剪裁功能

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

CSS隐藏元素的十四种方法

通过设置width:0或者height:0隐藏一个元素&#xff0c;文字隐藏可以设置color为背景色或transparent&#xff0c;但内容还在&#xff0c;所以用font-size:0&#xff1b; 将元素的opacity设置为0&#xff0c;元素本身还在&#xff0c;只是看不见&#xff1b; 通过绝对定位将元…

jquery.lazyload.js详解

简介lazyload.js用于长页面图片的延迟加载&#xff0c;视口外的图片会在窗口滚动到它的位置时再进行加载&#xff0c;这是与预加载相反的。优点&#xff1a;它可以提高页面加载速度&#xff1b;在某些情况清晰它也可以帮助减少服务器负载。安装bower安装&#xff1a;$ bower in…

Spring Boot Cache使用与整合

参考&#xff1a; 史上最全的Spring Boot Cache使用与整合Spring Cache扩展&#xff1a;注解失效时间主动刷新缓存 项目地址使用本地Caffeine缓存 引入依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starte…

vue-cli的打包配置文件

转载原文: 详解 vue-cli 的打包配置文件代码&#xff08;给大家写写注释&#xff09;. 一、vue-cli都做了什么 1、build/dev-server.js 文件 项目node的启动文件&#xff0c;这里面做了webpack配置和node操作&#xff0c; 2、build/webpack.base.conf.js webpack基本配置文件…