XMLHttpRequest FormData

What is FormData

MDN

XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.

XMLHttpRequest 第二版添加了对新接口 FormData 的支持。FormData 可以很方便地将表单字段和它们的值建立成键和值对应的成对形式,然后通过 XMLHttpRequestsent() 方法发送表格数据。

Constructor

FormData()

用于新建一个 FormData 对象:

javascriptvar formData = new FormData(form);

也可以先创建一个空 FormData 对象,之后再添加对应的键和值,append() 方法请看下面。

javascriptvar formData = new FormData();
formData.append('username', 'Justin');

Method

FormData.append

本方法用于向已存在的键添加新的值,如该键不存在,新建之。

语法

javascriptformData.append(name, value);
formData.append(name, value, filename);

参数解释

  • name
    键 (key), 对应表单域
  • value
    表单域的值
  • filename (optional)
    The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".

FormData.delete

将一对键和值从 FormData 对象中删除。

javascriptformData.delete(username);

FormData.get

返回给定键的第一个值

javascriptformData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);    // "Justin"

FormData.getAll

返回给定键的所有值

javascriptformData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);    // ["Justin", "Chris"]

FormData.has

检查是否包含给定键,返回 truefalse

javascriptformData.has(username);

FormData.set

设置给定键的值

javascriptformData.set(name, value);
formData.set(name, value, filename);

浏览器兼容情况

来自 MDN

Desktop

Feature Chrome Firfox(Gecko) Intenet Explorer Opera Safari
Basic support 7+ 4.0(2.0) 10+ 12+ 5+
append with filename (Yes) 22.0(22.0) ? ? ?
delete, get, getAll, has, set Behind Flag Not supported Not supported (Yes) Not supported

Mobile

Feature Android Chrome Android Firfox Mobile (Gecko) Firfox OS (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 ? 4.0(2.0) 1.0.1 ? 12+ ?
append with filename ? ? 22.0(22.0) 1.2 ? ? ?
delete, get, getAll, has, set (Yes) (Yes) Not supported Not supported Not supported (Yes) Not supported
阅读 4.3k

推荐阅读
Biang!
用户专栏

好好学习,天天向上o(^▽^)o

1 人关注
3 篇文章
专栏主页