JavaScriptFormData快速收集表单数据

示例代码：创建FormData对象

假设我们有以下HTML表单：

<form id="myForm">
    <label for="name">Enter name:</label>
    &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;userName&quot;&gt;

    <label for="surname">Enter surname:</label>
    &lt;input type=&quot;text&quot; id=&quot;surname&quot; name=&quot;userSurname&quot;&gt;

    <label for="number">Phone number:</label>
    &lt;input type=&quot;text&quot; id=&quot;number&quot; name=&quot;phoneNumber&quot;&gt;

    <button type="submit">Submit</button>
</form>

我们可以这样创建FormData对象：

// 获取表单元素
const myForm = document.getElementById('myForm');

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

console.log(formData); // FormData { ... }

注意： 只有具有name属性的表单元素才会被FormData自动收集。

除了传入表单元素，你也可以创建一个空的FormData对象，然后使用append()方法手动添加键值对：

const customFormData = new FormData();
customFormData.append('key1', 'value1');
customFormData.append('key2', 'value2');

访问和处理表单数据

FormData对象本身是一个可迭代的，但它不是一个普通的JavaScript对象。为了方便地访问和使用其中的数据，我们可以采用多种方法。

1. 使用 get() 和 getAll() 方法

• formData.get(name): 获取指定name属性的第一个值。
• formData.getAll(name): 获取指定name属性的所有值（适用于多选框或同名多个输入）。

const userName = formData.get('userName');
const phoneNumber = formData.get('phoneNumber');

console.log('User Name:', userName);       // 输出：User Name: [输入的名字]
console.log('Phone Number:', phoneNumber); // 输出：Phone Number: [输入的电话号码]

2. 遍历 FormData 对象

FormData对象实现了迭代器协议，这意味着你可以使用for...of循环、forEach()方法或entries()、keys()、values()方法来遍历其内容。

• 使用 for...of 循环:

  for (const [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
  }
  // 示例输出:
  // userName: [输入的名字]
  // userSurname: [输入的姓氏]
  // phoneNumber: [输入的电话号码]

• 使用 forEach() 方法:

  formData.forEach((value, key) => {
      console.log(`${key}: ${value}`);
  });

3. 将 FormData 转换为普通JavaScript对象

在许多场景下，将FormData对象转换为一个普通的JavaScript对象会更方便后续的数据处理，例如发送到后端API。ES2017引入的Object.fromEntries()方法可以非常简洁地实现这一点。

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

console.log(dataObject);
// 示例输出:
// {
//   userName: "[输入的名字]",
//   userSurname: "[输入的姓氏]",
//   phoneNumber: "[输入的电话号码]"
// }

现在，dataObject就是一个标准的JavaScript对象，你可以像访问普通对象属性一样访问其中的数据，例如dataObject.userName。

完整示例：收集与展示表单数据

结合上述知识点，我们来创建一个完整的示例，演示如何监听表单提交事件，收集数据，并将其打印出来。

HTML结构 (与之前相同):

<form id="myForm">
    <label for="name">Enter name:</label>
    &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;userName&quot;&gt;

    <label for="surname">Enter surname:</label>
    &lt;input type=&quot;text&quot; id=&quot;surname&quot; name=&quot;userSurname&quot;&gt;

    <label for="number">Phone number:</label>
    &lt;input type=&quot;text&quot; id=&quot;number&quot; name=&quot;phoneNumber&quot;&gt;

    <button type="submit">Submit</button>
</form>

<div id="output"></div>

JavaScript代码:

document.addEventListener('DOMContentLoaded', () => {
    const myForm = document.getElementById('myForm');
    const outputDiv = document.getElementById('output');

    myForm.addEventListener('submit', (event) => {
        // 阻止表单默认提交行为，这样页面就不会刷新
        event.preventDefault();

        // 创建FormData对象，自动收集表单数据
        const formData = new FormData(myForm);

        // 将FormData转换为普通JavaScript对象，方便后续处理
        const userData = Object.fromEntries(formData.entries());

        // 清空之前的输出
        outputDiv.innerHTML = '<h3>收集到的数据:</h3>';

        // 遍历并打印收集到的数据
        for (const key in userData) {
            if (Object.hasOwnProperty.call(userData, key)) {
                const value = userData[key];
                const p = document.createElement('p');
                p.textContent = `${key}: ${value}`;
                outputDiv.appendChild(p);
            }
        }

        console.log('收集到的数据对象:', userData);

        // 在实际应用中，你可能会将 userData 发送到服务器
        // fetch('/api/submit-form', {
        //     method: 'POST',
        //     body: formData // 可以直接发送 formData 对象
        //     // 或者发送 JSON 格式的数据：
        //     // headers: { 'Content-Type': 'application/json' },
        //     // body: JSON.stringify(userData)
        // })
        // .then(response => response.json())
        // .then(data => console.log('服务器响应:', data))
        // .catch(error => console.error('提交失败:', error));
    });
});

在这个示例中，当用户点击提交按钮时，我们首先阻止了表单的默认提交行为，然后利用new FormData(myForm)一行代码就收集了所有表单数据。接着，我们将FormData对象转换为一个易于处理的普通JavaScript对象userData，并将其内容逐一显示在页面上。

注意事项

1. name属性的重要性： FormData API 依赖于表单元素的name属性来创建键值对。如果一个输入元素没有name属性，它的值将不会被FormData收集。
2. 文件上传： FormData API 天然支持文件上传。当表单中包含<input type="file">元素时，FormData会自动将文件内容包含在内，这使得通过fetch或XMLHttpRequest发送文件变得非常简单。
3. 阻止默认提交： 当使用JavaScript处理表单提交时，务必调用event.preventDefault()来阻止表单的默认HTTP提交行为，否则页面可能会刷新或跳转。
4. 数据类型： FormData收集到的所有值都是字符串类型。如果需要数字或其他类型，需要手动进行类型转换。
5. 兼容性： FormData API 在现代浏览器中得到了广泛支持。对于老旧浏览器，可能需要Polyfill或采用传统方式。

总结

FormData API 是JavaScript中处理HTML表单数据的一个强大而高效的工具。它通过提供一种标准化的方式来收集表单所有输入，极大地简化了开发流程，减少了冗余代码。无论是简单的文本输入还是复杂的文件上传，FormData都能提供优雅的解决方案。掌握FormData的使用，将使你的Web表单交互逻辑更加健壮、简洁和易于维护。

今天关于《JavaScriptFormData快速收集表单数据》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！