时间: 2019-07-04阅读: 184标签: form

时间: 2019-01-21阅读: 2550标签: 对象一、概述

formData是ajax2.0(XMLHttpRequest
Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

FormData类型是XMLHttpRequest
2级
定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。

创建formData对象

作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的namevalue组装成一个queryString;2.异步上传二进制文件

 var formData=new FormData(form); // 通过append()方法追加数据 formData.append("name","Lori");

与普通Ajax相比,使用FormData的最大优点:可以异步上传二进制文件。

FormData提供的方法

二、使用

FormData.append()

1.创建FormData对象方式

js9905com金沙网站,向FormData中添加新的属性值,如果FormData对应的属性值存在则覆盖原值,否则新增一项属性值。

1).let formdata = new FormData();
创建一个空的FormData对象,可以使用formdata.append(key,value)来添加数据。

FormData.set()

2).let formdata = new FormData(form);
使用已有的表单来初始化一个FormData对象。

给FormData设置属性值,如果FormData对应的属性值存在则覆盖原值,否则新增一项属性值

form method="post" action="" input type="text" name="username" value=""/ input type="password" name="paw" value=""/ input type="button" value="提交"//form

//获取一个form表单对象let form = document.getElementById("form");//用这个表单对象来初始化FormData对象let formdata = new FormData(form);//我们可以通过name来访问表单中的字段formdata.get("username"); //获取username的值formdata.get("pwd"); //获取pwd的值//我们也可以添加数据formdata.append("token","fegahgag54");

FormData.get()

2.数据形式

返回在FormData对象中与给定键关联的第一个值

首先,我们要明确FormData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value。如果使用表单初始化FormData对象,每一个表单字段对应一条数据,他们的name属性值对应key值,value属性值对应value值。

FormData.getAll()

3.操作方法

返回一个包含FormData对象中与给定键关联的所有值的数组。

3.1获取数据 formdata.get(key)

FormData.delete():从FormData对象里面删除一个键值对

formdata.get("username"); //获取key为username的第一个值formdata.getAll("username"); //获取key为username的所有值,返回一个数组

FormData.has()

3.2添加数据 formdata.append(key,value)

返回一个布尔值表明FormData对象是否包含某些键

formdata.append("k1","v1");formdata.append("k1","v2");formdata.append("k2","v2");formdata.getAll("k1"); //["v1","v2"]formdata.get("k2"); //"v2"

FormData.keys()

3.3设置/修改数据
formdata.set(key,value)如果key不存在则新增一条数据,如果存在,则会修改对应的value值。

返回一个包含所有键的iterator对象

formdata.append("k1","v1");formdata.set("k1","v2");formdata.get("k1"); //"v2"