FormData对象
FF4中增加了一个很有意思的对象,FormData。通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台。这用jQuery的方法来说,就是serialize。但当我们使用Ajax提交时,这过程就要变成人工的了。因此,FormData对象的出现可以减少我们一些工作量。
想得到一个FormData对象,很简单:
var formdata = new FormData();
但一个空的FormData对象对我们没有意义,因此W3c草案提供了三种方案来获取或修改FormData。
方案1:创建一个空的FormData对象,然后再用append方法逐个添加键值对:
var formdata = new FormData();
formdata.append("name", "司徒正美");
formdata.append("blog", "http://www.cnblogs.com/rubylouvre/");
方案2:取得form元素对象,将它作为参数传入FormData对象中!
var formobj = document.getElementById("form");
var formdata = new FormData(formobj);
方案3:利用form元素对象的getFormData方法生成它!
var formobj = document.getElementById("form");
var formdata = formobj.getFormData()
注意,formdata是一个不透明的对象,现在暂时只有一个append可以操作,不能通过序列化手段得到其里面的内容,这实在是遗憾。它的用法现在也只有一个,用于增强型的XMLHttpRequest对象的send方法中去!
var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);
FormData对象的更多相关文章
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...
- HTML的FormData对象
FormData是HTML5标准制定的一个新的封装对象,有了FormData对象,可以方便地通过javascript创建表单数据,直接以ajax发送到服务器中. 目前浏览器的支持情况为: 详细的介绍与 ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- Ajax发送FormData对象封装的表单数据
前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- 使用JS的FormData对象
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- 使用HTML5 FormData对象实现大文件分块上传(断点上传)功能
FormData是HTML5新增的一个对象,通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单 ...
随机推荐
- 微信支付开发(4) 动态链接Native支付
关键字:微信支付 微信支付v3 动态native支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpa ...
- Linux就这个范儿 第8章 我是Makefile
Linux就这个范儿 第8章 我是Makefile P287 Makefile的作用就是——自动化编译,一旦写好,只需要一个make命令(解析Makefile,执行Makefile中描述的操作),整个 ...
- QT中静态库的生成与使用
一. 静态库的生成 1. 测试目录: lib 2. 源码文件名: mywindow.h, mywindow.cpp, 类MyWindow继承于QPushButton, 并将文字设置为&qu ...
- 布置theano(Windows10,无cuda)
软件包准备 1.Anaconda 下载地址,包含python.numpy.scipy.nose.pip等包,嗯,很爽. 2.tdm64-gcc 下载地址,windows下的gcc.g++编译器,用来t ...
- Fusioncharts使用说明
背景 最近由于工作需要,再次接触到了Fusioncharts,但也有不足之处,现在官网上似乎是不支持flash的版本了,只能看到html5相关的javascript版本,无奈再次从网上搜索到了一些别人 ...
- 解决多线程调用sql存储过程问题
场景: 我们程序现在改成多线程了,我现在需要把临时表中的数据给插入到TABLE_M中,但这时候可能其他的线程也在插入,我就不能用之前我们的方案了(select max(oid) from Tuning ...
- nodejs发起HTTPS请求并获取数据
摘要:在网站中有时候需要跨域请求数据,直接用Ajax无法实现跨域,采用其他方式需要根据不同的浏览器做相应的处理.用Nodejs可以很好的解决这些问题,后台引用HTTPS模块,发送和返回的数据均为JSO ...
- PostgreSQL Replication之第十一章 使用Skytools(4)
11.4 使用 londiste 复制数据 pgq是一个叫做londiste的复制工具的核心.londiste 的核心是有一个比如比Slony 更加简单,容易使用的机制.如果您在一个大的安装中使用Sl ...
- manacher 最长回文子串
确定当前已知能匹配到的最长处,看是否要更新最长 #include <bits/stdc++.h> using namespace std; const int N = 210005; in ...
- [原创]java WEB学习笔记54:Struts2学习之路---概述,环境的搭建
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...