FormData表示 HTML 表单数据对象。
构造函数是:
let formData = new FormData([form]);
如果提供了 HTML form
元素,它会自动捕获 form
元素字段。
<form id="formElem">
<input type="text" name="name" value="John">
<input type="text" name="surname" value="Smith">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>
我们可以使用以下方法修改 FormData
中的字段:
formData.append(name, value)
—— 添加具有给定name
和value
的表单字段,formData.append(name, blob, fileName)
—— 添加一个字段,就像它是<input type="file">
,第三个参数fileName
设置文件名(而不是表单字段名),因为它是用户文件系统中文件的名称,formData.delete(name)
—— 移除带有给定name
的字段,formData.get(name)
—— 获取带有给定name
的字段值,formData.has(name)
—— 如果存在带有给定name
的字段,则返回true
,否则返回false
。
从技术上来讲,一个表单可以包含多个具有相同 name
的字段,因此,多次调用 append
将会添加多个具有相同名称的字段。
还有一个 set
方法,语法与 append
相同。不同之处在于 .set
移除所有具有给定 name
的字段,然后附加一个新字段。因此,它确保了只有一个具有这种 name
的字段,其他的和 append
一样:
formData.set(name, value)
,formData.set(name, blob, fileName)
。