FormData 对象的使用
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。
var formData = new FormData();1.概述
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。
2. 构造函数
# template
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form>
# js
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上,添加其他数据
formData.append("token","kshdfiwi3rh");
?3. 操作方法
?formData里面存储的数据形式,一对key/value组成一条数据
?
key : [value,vaule1,value2]
key1 : value3
?
获取(get\getAll)
formData.get("key");// return value
formData.getAll("key");// return [value,vaule1,value2]
?添加(append)
?
指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
const formdata = new FormDara()
formdata.append('key','value1')
formdata.append('key','value2')
formdata.get('key') //return value1
formdata.getAll('key') //return [value1,value2]
?设置(set)
formdata.set('key','value1')
判断是否有对应的key(has) 返回Boolean
注意是判断key 不是 value
formData.has("key"); // true
formData.has("dawang"); // false
删除(del)
注意是删除key 及对应的值
formData.delete("key");
遍历迭代器(entries(),values())
var i = formData.values();
i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}
var i = formData.entries();
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}
?
?VUE
// template
Forms(:state="formstate",:formMethod="updateInfo",ref="sendinfo",v-if="step!=3")
...
//javascript
update(ref, db, id) {
let def = this.$refs[`${ref}`].$el
api.update(def, db, id)
// api
update(def, db, id) {
let data = new FormData(def)
data.append('id', id)
return ajax('update' + db+'info', data)
},
?