将表单提交映射到数组

基础概念

表单提交映射到数组通常是指在前端开发中，将HTML表单中的数据通过JavaScript或框架（如React、Vue等）处理后，转换成一个数组格式，以便于后续的数据处理和传输。

类型

简单数组：将表单数据按顺序存储在一个一维数组中。
键值对数组：将表单数据存储在一个对象数组中，每个对象包含键值对。

应用场景

数据提交：将表单数据发送到服务器进行处理。
数据存储：将表单数据存储在本地存储或数据库中。
数据处理：在前端对表单数据进行验证、过滤或转换。

示例代码（React）

假设我们有一个简单的HTML表单：

<form id="myForm">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <button type="submit">Submit</button>
</form>

我们可以使用JavaScript来处理表单提交并映射到数组：

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为

  const formData = new FormData(event.target);
  const dataArray = [];

  for (const [key, value] of formData.entries()) {
    dataArray.push({ [key]: value });
  }

  console.log(dataArray);
  // 输出: [{ username: '输入的用户名' }, { email: '输入的邮箱' }]

  // 发送数据到服务器
  fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(dataArray)
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
});