本文将介绍如何使用 JavaScript 的 FormData 对象，高效地从 HTML 表单中收集数据，并将其存储到变量中以便后续使用。通过示例代码和详细解释，您将学会如何简化表单数据处理流程，避免繁琐的单个元素选择和赋值操作。
使用 FormData 对象收集表单数据
JavaScript 的 FormData 对象提供了一种便捷的方式来表示 HTML 表单中的数据。它可以轻松地收集表单中所有字段的值，并以键值对的形式存储。
首先，你需要获取表单元素的引用。可以使用 document.querySelector() 或其他 DOM 选择器来实现：
const form = document.querySelector('form');然后，创建一个 FormData 对象，并将表单元素作为参数传递给它：
立即学习“Java免费学习笔记（深入）”；
const formData = new FormData(form);
现在，formData 对象包含了表单中所有字段的数据。
将 FormData 存储到变量并使用
FormData 对象本身不是一个可以直接访问的键值对集合。你需要遍历它，并将数据存储到你想要的变量中。以下是一些常用的方法：
1. 使用 entries() 方法迭代 FormData 对象：
entries() 方法返回一个迭代器，允许你遍历 FormData 对象中的所有键值对。
const data = {};
for (const [key, value] of formData.entries()) {
data[key] = value;
}
// 现在，data 对象包含了表单数据
console.log(data);
// 访问特定字段的值
console.log(data.name);
console.log(data.surname);
console.log(data.number);2. 使用 forEach() 方法：
forEach() 方法允许你对 FormData 对象中的每个键值对执行一个函数。
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// 现在，data 对象包含了表单数据
console.log(data);示例代码：
以下是一个完整的示例，演示如何从表单中收集数据并将其存储到 JavaScript 对象中：
注意事项：
- 确保你的 HTML 表单元素具有 name 属性，因为 FormData 对象使用 name 属性作为键来存储数据。
- FormData 对象可以处理各种类型的表单字段，包括文本输入框、选择框、复选框和文件上传等。
- FormData 对象特别适合用于通过 AJAX 将表单数据发送到服务器。
总结：
使用 JavaScript 的 FormData 对象可以极大地简化从 HTML 表单中收集数据的过程。通过将表单数据存储到 JavaScript 对象中，你可以轻松地访问和使用这些数据，例如在客户端进行验证、显示或通过 AJAX 发送到服务器。 这种方法比使用 document.querySelector 逐个获取元素的值更简洁、高效。
