发送一个简单的表单

一起看海

我们先来发送一个简单的表单。

正如你所看到的，它几乎就是一行代码：

<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>

在这个示例中，没有将服务器代码展示出来，因为它超出了我们当前的学习范围。服务器接受 POST 请求并回应 “User saved”。

FormData 方法
我们可以使用以下方法修改 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)。
我们也可以使用 for..of 循环迭代 formData 字段：

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 列出 key/value 对
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1，然后是 key2 = value2
}