使用 JavaScript FormData 对象高效收集表单数据并存储到变量-html教程-PHP中文网

使用 JavaScript FormData 对象高效收集表单数据并存储到变量

心靈之曲

发布： 2025-08-25 21:36:28

原创

1000人浏览过

使用 javascript formdata 对象高效收集表单数据并存储到变量

第一段引用上面的摘要：

本文介绍了如何使用 JavaScript 的 FormData 对象，以简洁高效的方式从 HTML 表单中收集数据。通过 FormData 对象，你可以轻松地获取表单中所有输入字段的值，并将它们存储到变量中，方便后续操作，例如数据验证、发送到服务器等。

使用 FormData 对象收集表单数据

HTML 表单是网页中常见的用户交互元素。使用 JavaScript 逐个获取表单字段的值虽然可行，但当表单字段较多时，代码会变得冗长且难以维护。FormData 对象提供了一种更优雅的解决方案。

首先，你需要获取表单元素的引用。然后，将该表单元素作为参数传递给 FormData 构造函数。

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

现在，formData 对象包含了表单中所有字段的键值对。

将 FormData 对象转换为 JavaScript 对象

FormData 对象本身并不是一个标准的 JavaScript 对象，无法直接使用点号或方括号访问其属性。为了方便后续操作，我们需要将其转换为一个 JavaScript 对象。

一种方法是使用 Object.fromEntries() 方法，该方法可以将键值对数组转换为一个对象。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

const formValues = Object.fromEntries(formData.entries());

登录后复制

现在，formValues 变量就是一个包含表单数据的 JavaScript 对象。你可以通过属性名访问每个字段的值：

const name = formValues.name;
const surname = formValues.surname;
const number = formValues.number;

console.log("Name:", name);
console.log("Surname:", surname);
console.log("Phone Number:", number);

登录后复制

另一种方法是手动遍历 FormData 对象，并将每个键值对添加到 JavaScript 对象中：

const formValues = {};
formData.forEach((value, key) => {
  formValues[key] = value;
});

登录后复制

这两种方法都能达到相同的目的。选择哪种方法取决于你的个人偏好和代码风格。

完整示例

下面是一个完整的示例，展示了如何使用 FormData 对象收集表单数据并存储到变量中：

<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()">Submit</button>
</form>

<script>
  function collectFormData() {
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const formValues = Object.fromEntries(formData.entries());

    const name = formValues.name;
    const surname = formValues.surname;
    const number = formValues.number;

    console.log("Name:", name);
    console.log("Surname:", surname);
    console.log("Phone Number:", number);
  }
</script>

登录后复制

注意事项：