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对象的更多相关文章

  1. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  2. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  3. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  5. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  6. (转)通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  7. Ajax发送FormData对象封装的表单数据

    前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  8. jQuery Ajax使用FormData上传文件和其他数据,后端web.py获取

    参考博文: 通过jQuery Ajax使用FormData对象上传文件 方法一:使用<form>表单初始化FormData对象方式上传文件 前端(JQuery): <form enc ...

  9. FormData+Ajax 实现多文件上传 学习使用FormData对象

    FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...

随机推荐

  1. 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码

    比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 ...

  2. linux操作小技巧锦集

    0.常用Linux命令 查看端口被占用情况: 1.netstat -tunlp|grep 端口号 2.lsof -i:端口号 tar 压缩文件命令: -c:建立一个压缩文件的参数指令(create 的 ...

  3. php递归无限级

    function getTree($data, $pId) { $tree = ''; foreach($data as $k => $v) { if($v['cate_ParentId'] = ...

  4. dirty_background_ration 与 /proc/sys/vm/dirty_ratio

    wappiness的值的大小对如何使用swap分区是有着很大的联系的.swappiness=0的时候表示最大限度使用物理内存,然后才是 swap空间,swappiness=100的时候表示积极的使用s ...

  5. PCB

    Layer Stack Manager(层堆栈管理) 用户可以通过Layer Stack Manager对话框来添加更多的层. 1.选择Design>>Layer Stack Manage ...

  6. go标准库的学习-encoding/json

    参考https://studygolang.com/pkgdoc 导入方式: import "encoding/json" json包实现了json对象的编解码,参见RFC 462 ...

  7. IDEA(jetbrain通用)优雅级使用教程(转)

    文章转自  http://www.jianshu.com/p/3160ff832a9b 前面写过一篇IDEA的入门级文章,但是只学会了那些配置啊什么的并不能提高我们的开发效率.事实上,如果你IDEA用 ...

  8. Qt warning: 构建目录必须和源文件目录为同级目录

    从一台电脑转移项目到另一电脑, 路径发生变化,重新构建运行时会出现“QT 构建目录必须和源目录为同级目录”提示,解决办法很加单.如下: 方法一: 点击 project(项目)->然后,看看Bui ...

  9. Spring Security 用户认证原理分析

    本文基于 spring-security-core-5.1.1 和 tomcat-embed-core-9.0.12. 核心原理 用户通过 username 和 password 登录时,后端会经过一 ...

  10. jmeter(十一)JDBC Request之Query Type

    工作中遇到这样一个问题: 需要准备10W条测试数据,利用jmeter中的JDBC Request向数据库中批量插入这些数据(只要主键不重复就可以,利用函数助手中的Random将主键的ID末尾五位数随机 ...