FormData
@
目录
1. FormData 对象的作用
- 模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。
- 异步上传二进制文件
2. FormData 对象的使用
- 准备 HTML 表单
<!-- form 不用指定 action 和 method,它通过ajax请求来完成 -->
<form id="form">
<!-- 表单控件需要指定 name 属性 -->
<input type="text" name="username" />
<input type="password" name="password" />
<!-- 不使用submit控件,它有默认事件 -->
<input type="button"/>
</form>
- 将 HTML 表单转化为 formData 对象
var form = document.getElementById('form');
var formData = new FormData(form);
/*
formData 是个内部封装了很多东西的对象,可以把它看成有表单控件的name值 和 value值 组成的键值对 对象 ,比如:
{"username": "jam", "password": "123"}
*/
- 通过ajax请求提交表单对象
new XMLHttpRequest.send(formData);
3. FormData 对象的实例方法
formData.get()
获取表单对象中属性的值
/*
key: 表单控件中的name , 返回对应的value值
*/
formData.get('key');
formData.set()
设置表单对象中属性的值
// 如果设置的表单属性存在 将会覆盖属性原有的值,
//如果设置的表单属性不存在 将会创建这个表单属性
formData.set('key', 'value');
formData.delete()
删除表单对象中属性的值
formData.delete('key');
formData.append();
向表单对象中追加属性值
formData.append('key', 'value');
注意:
-
set 方法与 append 方法的区别是,在属性名已存在的情况下,set 会覆盖已有键名的值,append会保留两个值。
-
通过append()给formData追加同名属性,并以ajax请求的形式发送给服务端,请求中确实传递了多个同名属性,可服务器默认情况下只会接收最后一个同名属性