深入浅出 new FormData()

2023-11-26 20:58:31

引言

在现代 Web 开发中，处理表单数据已成为一项至关重要的任务。为了有效且灵活地处理此类数据，我们引入了 new FormData()。本文旨在全面阐述 new FormData()，剖析其特性、应用场景，并提供清晰的示例指导，帮助您充分掌握这种强大的工具。

认识 new FormData()

new FormData() 是一个内置的 JavaScript 对象，它提供了一种简单且高效的方式来收集和发送表单数据。该对象与传统的表单序列化方法不同，它不需要依赖于表单元素的 name 和 value 属性。相反，它使用键值对的形式，其中键对应于表单元素的名称，而值则对应于元素的值。

创建 new FormData() 对象

创建 new FormData() 对象非常简单，只需调用 new FormData() 即可。该对象是一个空的构造函数，它将自动初始化并准备收集表单数据。

const formData = new FormData();

添加键值对

使用 append() 方法，我们可以将键值对添加到 FormData 对象中。该方法接受两个参数：键（表单元素的名称）和值（元素的值）。

formData.append("username", "admin");
formData.append("password", "secret");

添加文件

new FormData() 的一个重要特性是能够处理二进制文件。我们可以使用 append() 方法，并传入文件对象作为值来添加文件。

const fileInput = document.getElementById("file-input");
formData.append("file", fileInput.files[0]);

发送 FormData 数据

一旦我们收集了所有必要的数据，就可以使用 XMLHttpRequest 或 fetch() API 发送 FormData 数据。与传统的表单序列化方法不同，FormData 数据无需手动序列化。

// 使用 XMLHttpRequest 发送数据
const xhr = new XMLHttpRequest();
xhr.open("POST", "submit.php");
xhr.send(formData);

// 使用 fetch() 发送数据
fetch("submit.php", {
  method: "POST",
  body: formData
});

示例：使用 new FormData() 提交表单

让我们通过一个示例，详细了解如何使用 new FormData() 提交表单。

HTML 代码：

<form id="my-form">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="Submit">
</form>

JavaScript 代码：

const form = document.getElementById("my-form");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  // 创建 new FormData() 对象
  const formData = new FormData(form);

  // 发送数据
  fetch("submit.php", {
    method: "POST",
    body: formData
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });
});