FormData对象
Posted lstcon
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FormData对象相关的知识,希望对你有一定的参考价值。
1、概念
FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。
使用ajax时,使用FormData对象可以减少queryString的工作量(queryString是查询字符串,http查询字符串由url中?后面的值指定)。
2、使用
1)、创建对象
var formData = new FormData();
2) 、使用实例化对象
假如有下面的form表单
1 <form id="myForm" action="" method="post"> 2 <input type="text" name="name">名字 3 <input type="password" name="psw">密码 4 <input type="submit" value="提交"> 5 </form>
3、 操作方法
1、获取数据:get(key) 或者 getAll(key)来获取对应的数据值
formData.get("name"); // 获取key为name的第一个值 formData.get("name"); // 返回一个数组,获取key为name的所有值
2、添加数据: append(key, value)添加数据,如果key值不存在会增加一条值,如果存在则添加到数据的末尾
1 formData.append("k1", "v1"); 2 formData.append("k1", "v2"); 3 formData.append("k1", "v1"); 4 5 formData.get("k1"); // "v1" 6 formData.getAll("k1"); // ["v1","v2","v1"]
3、设置修改数据:set(key , value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。
1 formData.append("k1", "v1"); 2 formData.set("k1", "1"); 3 formData.getAll("k1"); // ["1"]
4、删除数据:通过delete(key),来删除数据
formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k1", "v1"); formData.delete("k1"); formData.getAll("k1"); // []
5、遍历数据 :可以通过entries()来获取一个迭代器,然后遍历所有的数据,
迭代器的规则:
1、每调用一次next()返回一条数据,数据的顺序由添加的顺序决定
2、返回的是一个对象,当其done属性为true时,说明已经遍历完所有的数据,这个也可以作为判断的依据
3、返回的对象的value属性以数组形式存储了一对key/value,数组下标0为key,下标1为value,如果一个key值对应多个value,会变成多对key/value返回
1 formData.append("k1", "v1"); 2 formData.append("k1", "v2"); 3 formData.append("k2", "v1"); 4 5 var i = formData.entries(); 6 7 i.next(); // {done:false, value:["k1", "v1"]} 8 i.next(); // {done:fase, value:["k1", "v2"]} 9 i.next(); // {done:fase, value:["k2", "v1"]} 10 i.next(); // {done:true, value:undefined}
以上是关于FormData对象的主要内容,如果未能解决你的问题,请参考以下文章
JSON对象转成formData对象,formData对象转成JSON对象
JSON对象转成formData对象,formData对象转成JSON对象