本文将介绍如何使用 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 对象中：
<form id="myForm"> <label for="name">Enter name:</label> <input type="text" id="name" name="name"> <label for="surname">Enter surname:</label> <input type="text" id="surname" name="surname"> <label for="number">Phone number:</label> <input type="text" id="number" name="number"> <button type="button" onclick="collectFormData()">Collect Data</button> </form> <script> function collectFormData() { const form = document.getElementById('myForm'); const formData = new FormData(form); const data = {}; formData.forEach((value, key) => { data[key] = value; }); console.log(data); alert(`Name: ${data.name}, Surname: ${data.surname}, Number: ${data.number}`); } </script>
注意事项：
- 确保你的 HTML 表单元素具有 name 属性，因为 FormData 对象使用 name 属性作为键来存储数据。
- FormData 对象可以处理各种类型的表单字段，包括文本输入框、选择框、复选框和文件上传等。
- FormData 对象特别适合用于通过 ajax 将表单数据发送到服务器。
总结：
使用 JavaScript 的 FormData 对象可以极大地简化从 HTML 表单中收集数据的过程。通过将表单数据存储到 JavaScript 对象中，你可以轻松地访问和使用这些数据，例如在客户端进行验证、显示或通过 AJAX 发送到服务器。 这种方法比使用 document.querySelector 逐个获取元素的值更简洁、高效。
