Ajax进阶 FormData对象
Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html
xhr 2.0及FormData介绍
FormData对象 其实和 XMLHttpRequest对象 是一样的,和Date,Array这些对象也是一样的,都是window对象的属性。
前面那个链接中内容全是XMLHttpRequest 1.0版本。。但是既然ajax这么好用,自然就要扩展了,做了点升级,于是就有了XMLHttpRequest 2.0,人称XMLHttpRequest 2级。
想想如果使用post方式请求数据的时候,同时又提交了一些数据,于是就要设置一些Content-Type为x-www-form-urlencoded头部信息,否则后端程序收到之后,不能通过$_POST来获取(针对PHP),
而且如果想要使用ajax来发送文件,那么,困难还是有的。
所以呢,XMLHttpRequest 2.0版本中就增加一个狠角色——FormData对象 ,为什么说他狠呢,因为,可以把一个实例化的FormData对象直接作为xhr.send的参数,而不需要设置头部信息。同时支持发送文件,其实都没啥的。对于FormData来说也就是小case。
FormData属性及方法
可以通过console.log(window)来找到FormData对象,看一看他的属性和方法
方法:见名知意
set("key","value")
append("key","value")
delete("key")
get("key")
getAll("key")
使用FormData
下面是FormData的使用示例:
var fd = new FormData(); //set会覆盖,简记为设置单一变量
fd.set("name","test");
fd.set("name","demo");
console.log(fd.get("name")); //demo
console.log(fd.getAll("name")); //["demo"] //append会创建一个数组,key就是数组名
fd.append("name","abc");
fd.append("name","xyz");
console.log(fd.get("name")); //abc
console.log(fd.getAll("name"));//["abc", "xyz"] //删除key的值
fd.delete("name");
console.log(fd.get("name")); //null
FormData搭配XMLhttpRequest
就如开头所说的,FormData对象直接作为xhr.send的参数,即可发送数据,前提是不是get方法,可以是post方法(通常都是)。
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("name[]","demo");
fd.append("name[]","test");
//注意要传递数组的话,一定要在key后面加一个[],否则服务器只能收到最后一次append的值
xhr.open("post","recieve.php",true);
xhr.send(fd);
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if((xhr.status==200 && xhr.status<300) || xhr.status==304){
console.log(xhr.responseText);
} else {
console.log("请求失败,响应码:" + xhr.status)
}
}
}
Ajax进阶 FormData对象的更多相关文章
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- 通过jQuery Ajax使用FormData对象上传文件 (转载)
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- [转] 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- (转)通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- Ajax发送FormData对象封装的表单数据
前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- jQuery Ajax使用FormData上传文件和其他数据,后端web.py获取
参考博文: 通过jQuery Ajax使用FormData对象上传文件 方法一:使用<form>表单初始化FormData对象方式上传文件 前端(JQuery): <form enc ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
随机推荐
- iText5报表_页眉与页脚
1.概述 iText5中并没有之前版本HeaderFooter对象设置页眉和页脚,可以利用PdfPageEventHelper来完成页眉页脚的设置工作.PdfPageEventHelper ...
- EJB3.0中的session bean以及MDB解析
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/aboy123/article/details/24587133 大型业务系统面临的主要问题就是高并发 ...
- Centos7下安装docker(1)
1.确认系统没安装任何docker相关的安装包 yum remove docker docker-common docker-selinux docker-engine centos7的docker存 ...
- Smith Numbers POJ - 1142 (暴力+分治)
题意:给定一个N,求一个大于N的最小的Smith Numbers,Smith Numbers是一个合数,且分解质因数之后上质因子每一位上的数字之和 等于 其本身每一位数字之和(别的博客偷的题意) 思路 ...
- Android学习之基础知识九 — 数据存储(持久化技术)之使用LitePal操作数据库
上一节学习了使用SQLiteDatabase来操作SQLite数据库的方法,接下来我们开始接触第一个开源库:LitePal.LitePal是一款开源的Android数据库框架,它采用了对象关系映射(O ...
- Android学习之基础知识九 — 数据存储(持久化技术)之SQLite数据库存储
前面一讲介绍了数据持久化技术的前两种:文件存储.SharedPreferences存储.下面介绍第三种技术:SQLite数据库存储 一.SQLite数据库存储 SQLite数据库是一款轻量级的关系型数 ...
- linux下文件共享的几种常用方式
1. python方式,做一个简单的服务器.默认是开启8000端口. > python -m SimpleHTTPServer 执行命令后,在浏览器上输入该机器IP+8000端口即可 2. sc ...
- php实现一个简单的四则运算计算器
php实现一个简单的四则运算计算器(还不支持括号的优先级).利用栈这种数据结构来计算表达式很赞. 这里可以使用栈的结构,由于php的数组“天然”就有栈的特性,这里直接就利用了数组.当然可以使用栈结构写 ...
- IIR数字滤波器的实现(C语言)
经典滤波器和数字滤波器 一般滤波器可以分为经典滤波器和数字滤波器. 经典滤波器:假定输入信号中的有用成分和希望去除的成分各自占有不同的频带.如果信号和噪声的频谱相互重迭,经典滤波器无能为力.比如 FI ...
- asp.net web api集成微信服务(使用Senparc微信SDK)- z
/// <summary> /// 微信请求转发控制器 /// </summary> [RoutePrefix("weixin")] public clas ...