如何使用JavaScript获取HTML表单中的值？

在开发中，我们经常需要获取用户在表单中输入的数据，然后进行处理或提交到服务器。今天我们就来聊一聊，如何用JavaScript获取HTML表单中的值。

使用 FormData 构造函数

FormData 是一个非常方便的工具，它可以把表单中的所有数据打包成键值对的形式。我们来看一个例子，假设我们有一个用户登录表单：

<form id="login-form">
  用户名: <input type="text" name="username">
  <br />
  密码: <input type="password" name="password">
  <br />
  <input type="submit" value="登录">
</form>

现在我们要获取用户输入的用户名和密码，可以这样写：

const form = document.getElementById('login-form');
form.addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止表单的默认提交行为
  const formData = new FormData(form); // 创建FormData对象
  for (const pair of formData.entries()) {
    console.log(`${pair[0]}: ${pair[1]}`); // 输出每一个表单字段的键和值
  }
});

代码解析

• document.getElementById('login-form') ：首先，我们通过ID获取到表单元素。
• form.addEventListener('submit', function (e) {...})：然后，我们给表单绑定一个submit事件监听器，当用户点击登录按钮时，这个事件就会触发。
• e.preventDefault()：这行代码非常关键，它阻止了表单的默认提交行为。这样我们可以用JavaScript来处理数据，而不是直接刷新页面。
• const formData = new FormData(form)：FormData对象会自动读取表单中的所有输入字段，并将其封装成键值对的形式。
• formData.entries()：这个方法返回一个包含所有键值对的可迭代对象。我们可以用for...of循环来遍历它们，并输出每个字段的名称和值。

假设你在开发一个在线购物的系统，用户在填写订单表单后点击提交，你可以用上面的方法获取到用户的所有输入数据，然后进行验证或发送到服务器。

你还可以根据需要，把这些数据通过fetch或axios发送到后端服务器，完成用户的登录或其他操作。

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const formData = new FormData(form);
  
  fetch('/login', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
});

结束

FormData 是处理表单数据的强大工具，特别适合在现代Web开发中使用。它不仅简化了数据获取的过程，而且能够很好地与后端API集成。在下次你需要处理表单数据时，不妨试试这个方法，希望这篇文章能帮助你更好地掌握这一技巧。如果你有任何疑问或其他场景的需求，欢迎在评论区与我交流！