FormData 对象的使用

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同


FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。
var formData = new FormData();

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);
1.概述
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)
},


?

0 个评论

要回复文章请先登录注册