正文

如何从JavaScript表单中获取map类型的数据

/0 浏览量
0529

在JavaScript中，表单数据通常以对象的形式存储，其中键是表单字段的名称，值是用户输入的数据。如果你想从表单中获取的数据结构类似于JavaScript的Map类型，你可以通过以下步骤来实现：

1. 创建表单元素

首先，你需要一个HTML表单，其中包含你想要获取数据的输入字段。例如：

<form id="myForm">
  <input type="text" name="key1" placeholder="Enter key 1">
  <input type="text" name="value1" placeholder="Enter value 1">
  <input type="text" name="key2" placeholder="Enter key 2">
  <input type="text" name="value2" placeholder="Enter value 2">
  <button type="submit">Submit</button>
</form>

2. 使用JavaScript监听表单提交

接下来，你需要监听表单的提交事件，并在事件处理函数中获取表单数据。这里我们使用addEventListener来监听表单的submit事件：

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

  // 获取表单数据
  const formData = new FormData(this);
  const mapData = new Map();

  // 遍历表单数据，填充到Map中
  for (let [key, value] of formData) {
    // 假设每个键对应一个值，且键和值的名字相同
    if (key.endsWith('1') || key.endsWith('2')) {
      const mapKey = key.replace(/1|2$/, '');
      mapData.set(mapKey, value);
    }
  }

  // 输出Map数据
  console.log(mapData);
});

3. 解释代码

  • FormData(this)：创建一个FormData对象，它包含了表单中的所有数据。
  • new Map()：创建一个新的Map对象，用于存储表单数据。
  • for...of循环：遍历FormData对象中的所有键值对。
  • key.replace(/1|2$/, '')：移除键名中的1或2，以便创建一个统一的键名。

4. 使用示例

假设用户在表单中输入了以下数据：

key1: apple
value1: red
key2: banana
value2: yellow

在提交表单后，控制台将输出以下内容：

Map { 'apple' => 'red', 'banana' => 'yellow' }

这样，你就可以从JavaScript表单中获取到类似于Map类型的数据了。

-- 展开阅读全文 --