JavaScript 获取表单数据

在 Web 开发中，表单是用户与网站进行交互的重要途径之一。而获取表单中用户输入的数据，是开发者需要经常处理的内容之一。在 JavaScript 中，我们可以通过以下两种方式获取表单数据：

通过表单元素的 ID 获取

在 HTML 中常常使用 id 属性给表单元素命名，通过这个 ID，我们可以轻松地获取表单数据。以下是一个简单的例子：

<form id="my-form">
  <label>
    姓名：
    <input type="text" name="username">
  </label>
  <label>
    年龄：
    <input type="number" name="age">
  </label>
  <button type="submit">提交</button>
</form>

以上是一个简单的表单，其中 id 为 my-form，包含了姓名和年龄两个输入框和一个提交按钮。接下来是获取表单数据的 JavaScript 代码：

const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  console.log(data);
});

以上代码中，我们首先获取了表单元素，然后给其添加了一个 submit 事件监听器，在表单提交时阻止了默认行为（即向后端发送数据请求），接着通过 FormData 构造函数读取了表单数据，最终把 FormData 转换成普通对象并打印出来。

以上代码输出结果为：

{ username: "张三", age: "18" }

可以看到，通过这种方式，我们可以快速获取到表单中的数据。

通过表单元素的 name 属性获取

除了通过 ID 获取表单元素，我们还可以通过表单元素的 name 属性获取。不过这种方式只适用于表单元素具有 name 属性的情况。

以下是改写后的 HTML 代码：

<form>
  <label>
    姓名：
    <input type="text" name="username">
  </label>
  <label>
    年龄：
    <input type="number" name="age">
  </label>
  <button id="submit-btn" type="submit">提交</button>
</form>

这里没有设置 ID，我们可以通过表单元素下的 elements 属性获取到表单中所有元素，然后遍历获取它们的 name 属性得到相应的值：

const form = document.querySelector('form');
const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止按钮默认行为
  const data = {};
  for (const element of form.elements) {
    if (element.tagName.toLowerCase() === 'input' && element.type !== 'submit') {
      data[element.name] = element.value;
    }
  }
  console.log(data);
});

以上代码中，我们通过 querySelector 方法获取了表单元素，使用 getElementById 获取了提交按钮，并给它添加了 click 事件监听器。在事件回调函数中，我们使用 for...of 语句遍历表单元素下的 elements 属性，当表单元素的标签名称为 input 且 type 不为 submit 时，将其 name 属性作为键，value 属性作为值存入一个新的对象 data 中。最终我们打印出了这个对象，输出结果与第一种方式相同。

以上是通过 JavaScript 获取表单数据的两种方式，开发者可以根据具体情况选择哪种方式。