认识FormData对象
FormData对象用于创建一个表示HTML表单数据的键值对集合。
它可以用于发送AJAX请求或通过XMLHttpRequest发送表单数据。
以下是FormData对象的一些作用:
-
收集表单数据:通过将FormData对象与表单元素关联,可以方便地收集表单中的数据。使用FormData对象,可以获取表单中的键值对,包括输入框、选择框、单选框、复选框等元素的值。
-
发送表单数据:使用FormData对象,可以将表单数据通过AJAX请求或XMLHttpRequest发送到服务器。FormData对象提供了一些方法,可以设置请求头部、添加/删除键值对、追加数据等。
-
支持文件上传:FormData对象支持文件上传功能。可以通过使用FormData对象的append()方法,将文件对象添加到表单数据中,然后发送到服务器。这使得文件上传变得非常简单。
总之,FormData对象提供了一种简便的方式来处理和发送表单数据,包括键值对和文件上传。它是进行AJAX表单提交的一种常用方式。
FormData对象实例方法
在使用FormData对象之前,首先需要用new关键字通过实例化FormData()构造函数来创建FromData对象,代码如下:
var formData = new FormData(form);
这段代码的功能是将指定表单中的所有输入字段和值转化为 FormData 对象,并将这个对象存储在 formData
变量中以供进一步使用
代码解释
var formData
:创建一个名为formData
的变量,用于存储 FormData 对象的实例。new FormData(form)
:通过FormData
构造函数创建一个新的 FormData 对象,并将表单元素form
作为参数传递给构造函数。这会将表单中的所有字段和值存储到 FormData 对象中。form
:这是一个表单元素的引用,表示要收集数据的表单。这可以是一个通过document.getElementById()
或其他方法获取的表单元素。=
:将右侧的表达式的值(FormData 对象)赋给左侧的变量formData
。
FormData实例对象提供了四种方法,具体如下:
set()方法用于设置FormData对象属性的值
set('key','value');
get()方法用于获取FormData对象属性的值
get('key');
append()方法用于添加FormData对象属性的值
append('key','value');
delete()方法用于删除FormData对象属性的值
delete('key');
FormData对象实例方法的使用
知道了实例化对象方法的使用,就用简单的案例来了解