关于 JavaScript 中'FormData”对象您需要了解的一切

在 JavaScript 中处理 HTML 表单中的数据时，您经常会遇到收集、操作数据并将其发送到服务器的需要。这就是 FormData 的用武之地——一个强大而灵活的表单管理 API。在这篇文章中，我们将详细解释 FormData 的工作原理、它的优点以及如何在现实场景中使用它。

---

什么是表单数据？

FormData 是一个嵌入式 JavaScript 对象，它可以：

• 从 HTML 表单中进行简单的数据收集。

• 使用 fetch API 或 XMLHttpRequest 将该数据发送到服务器。

• 使用二进制数据，例如文件。

该对象根据 multipart/form-data MIME 类型自动格式化数据，使其成为发送复杂数据（包括文件）的理想选择。

---

如何创建FormData对象？

创建一个空的 FormData 对象

如果要手动添加数据，请使用空的 FormData 构造函数：

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

从表单创建 FormData 对象

如果您有 HTML 表单，则可以直接将表单引用传递给 FormData 构造函数，该构造函数将自动从中收集所有数据。

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

---

添加数据

使用 .append(key, value) 方法附加数据：

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

如果从 添加文件，只需使用 .files[0]:

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

---

读取数据

要迭代 FormData 对象中的数据，请使用 for...of 循环以及 .entries() 方法：

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

---

向服务器发送FormData数据

FormData 非常适合使用 fetch API 将数据发送到服务器。这是一个简单的例子：

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

无需手动设置Content-Type header； FormData 自动执行此操作。

---

FormData 的优点

1. 使用文件
   
   FormData 允许您直接从 轻松添加和发送文件田野。

2. 自动序列化
   
   FormData 不会手动格式化数据，而是自动将其格式化为 multipart/form-data。

3. 灵活性
   
   轻松管理键值对，包括迭代和更新数据的能力。

4. 二进制数据支持
   
   它非常适合发送图像、PDF 或其他文件等二进制数据。

---

实践示例：注册表

这是一个完整的示例，我们从表单收集数据并将其发送到服务器：

HTML 表单

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

---

有用的提示

• 如果要手动修改数据，请使用.set(key, value)而不是.append()。

• 您可以使用 .has(key) 方法检查特定键是否存在。

• 要删除数据，请使用 .delete(key)。

---

结论

FormData 是处理表单数据的强大工具。即使在处理文件时，它也可以轻松收集、操作和发送数据。它的灵活性以及与现代 JavaScript API 的轻松集成使其成为许多 Web 应用程序不可或缺的一部分。

以上是关于 JavaScript 中'FormData”对象您需要了解的一切的详细内容。更多信息请关注PHP中文网其他相关文章！