FormData专门为xhr进行服务,为序列化表以及表单格式的xhr上传提供了极大的便利。
如:
var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);
构造方法
-
直接创建空对象
var formData = new FormData() // 创建空对象 formData.append('id','2') // 添加数据 formData.set('id','1') // 修改数据 formData.getAll('id') // 获取以id为key,对应的所有value。 formData.has('id') // key值是否包含id formData.delete('id') // 删除数据,key下面所有的value formData.get('id') // 取对象
其中,
formData以key-value的格式来存储数据,一个key可以对应多个value,例如表单复选框。
-
利用已有的表单来创建一个实例
<form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> </form>
// 获取页面已有的一个form表单 var form = document.getElementById("myForm"); // 用表单来初始化 var formData = new FormData(form); // 我们可以根据name来访问表单中的字段 var name = formData.get("name"); // 获取名字 var psw = formData.get("psw"); // 获取密码
其中,
FormData接受一个form表单dom作为构造函数的参数,来创建一个formdata对象。
遍历
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
var i = formData.entries();
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:false, value:["k1", "v2"]}
i.next(); // {done:false, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}
其中,
通过formData.entries()获得一个遍历器,next()来向下遍,done为true,则代表已经遍历结束。