第十三章认识Ajax(四)

认识FormData对象

FormData对象用于创建一个表示HTML表单数据的键值对集合。

它可以用于发送AJAX请求或通过XMLHttpRequest发送表单数据。

以下是FormData对象的一些作用：

1. 收集表单数据：通过将FormData对象与表单元素关联，可以方便地收集表单中的数据。使用FormData对象，可以获取表单中的键值对，包括输入框、选择框、单选框、复选框等元素的值。

2. 发送表单数据：使用FormData对象，可以将表单数据通过AJAX请求或XMLHttpRequest发送到服务器。FormData对象提供了一些方法，可以设置请求头部、添加/删除键值对、追加数据等。

3. 支持文件上传：FormData对象支持文件上传功能。可以通过使用FormData对象的append()方法，将文件对象添加到表单数据中，然后发送到服务器。这使得文件上传变得非常简单。

总之，FormData对象提供了一种简便的方式来处理和发送表单数据，包括键值对和文件上传。它是进行AJAX表单提交的一种常用方式。

FormData对象实例方法

在使用FormData对象之前，首先需要用new关键字通过实例化FormData()构造函数来创建FromData对象，代码如下：

var formData = new FormData(form);

这段代码的功能是将指定表单中的所有输入字段和值转化为 FormData 对象，并将这个对象存储在 formData 变量中以供进一步使用

代码解释

1. var formData：创建一个名为 formData 的变量，用于存储 FormData 对象的实例。
2. new FormData(form)：通过 FormData 构造函数创建一个新的 FormData 对象，并将表单元素 form 作为参数传递给构造函数。这会将表单中的所有字段和值存储到 FormData 对象中。
3. form：这是一个表单元素的引用，表示要收集数据的表单。这可以是一个通过 document.getElementById() 或其他方法获取的表单元素。
4. =：将右侧的表达式的值（FormData 对象）赋给左侧的变量 formData。

FormData实例对象提供了四种方法，具体如下：

set()方法用于设置FormData对象属性的值

set('key','value');

get()方法用于获取FormData对象属性的值

get('key');

append()方法用于添加FormData对象属性的值

append('key','value');

delete()方法用于删除FormData对象属性的值

delete('key');

FormData对象实例方法的使用

知道了实例化对象方法的使用，就用简单的案例来了解