FormData

@

目录

• 1. FormData 对象的作用
• 2. FormData 对象的使用
• 3. FormData 对象的实例方法
  • formData.get()
  • formData.set()
  • formData.delete()
  • formData.append();

---

• FormData - Web API 接口参考 | MDN (mozilla.org)
• FormData (javascript.info)

1. FormData 对象的作用

• 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
• 异步上传二进制文件

2. FormData 对象的使用

1. 准备 HTML 表单

<!-- form 不用指定 action 和 method，它通过ajax请求来完成 -->
<form id="form">
	<!-- 表单控件需要指定 name 属性 -->
	<input type="text" name="username" />
	<input type="password" name="password" />
	<!-- 不使用submit控件，它有默认事件 -->
	<input type="button"/>
</form>

2. 将 HTML 表单转化为 formData 对象

var form = document.getElementById('form');
var formData = new FormData(form);
/*
formData 是个内部封装了很多东西的对象，可以把它看成有表单控件的name值 和 value值 组成的键值对 对象 ，比如：
{"username": "jam", "password": "123"}
*/

3. 通过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请求的形式发送给服务端，请求中确实传递了多个同名属性，可服务器默认情况下只会接收最后一个同名属性