JS获取表单数据详解

在Web开发过程中，表单是常见的数据交互方式，而在这个过程中获取表单数据就显得尤为重要。本文从多个方面进行阐述，让你深入了解JS获取表单数据的各种方法。

一、JS获取表单数据的方式

JS获取表单数据一般有两种方式：原生JS获取表单数据和使用第三方库（如jQuery）获取表单数据。下面我们将分别介绍这两种方式。

二、原生JS获取表单数据

要获取表单数据，我们可以使用表单元素提供的方法和属性，比较常用的有以下几种：

1. `form.elements`：获取表单中的所有元素，包括input、select、button等；
2. `form.elements.name`：获取指定name的表单元素，可以返回一个节点或者一个节点列表；
3. `form.elements.type`：获取指定type的表单元素；
4. `form.elements.value`：获取表单元素的值。

下面是一个简单的代码示例：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  console.log(form.elements.username.value); // 获取用户名
  console.log(form.elements.password.value); // 获取密码
</script>

三、JS获取表单提交的数据

通过表单的`submit`事件，我们可以获取表单提交的数据。我们可以使用`FormData`对象来获取表单数据，也可以手动获取表单中每个表单元素的值。下面是两个示例：

1. 使用`FormData`对象获取表单数据

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表单默认提交事件
    const formData = new FormData(form);
    console.log(formData.get('username')); // 获取用户名
    console.log(formData.get('password')); // 获取密码
  });
</script>

2. 手动获取表单中每个表单元素的值

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表单默认提交事件
    const username = form.elements.username.value; // 获取用户名
    const password = form.elements.password.value; // 获取密码
    console.log(username);
    console.log(password);
  });
</script>

四、获取表单所有数据的方法

有时候，我们需要获取表单中所有的数据，包括复选框和多选框等。这时候，我们可以通过循环表单元素来获得所有表单数据。下面是一个简单的示例代码：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="checkbox" name="checkbox" value="1">选项1</checkbox>
  <input type="checkbox" name="checkbox" value="2">选项2</checkbox>
  <input type="radio" name="radio" value="1">单选项1</radio>
  <input type="radio" name="radio" value="2">单选项2</radio>
  <select name="select">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
  <textarea name="textarea"></textarea>
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表单默认提交事件
    const formData = {};
    for (let i = 0; i < form.elements.length; i++) {
      const element = form.elements[i];
      if (element.name) {
        if (element.type === 'checkbox' || element.type === 'radio') {
          if (element.checked) {
            if (!formData[element.name]) {
              formData[element.name] = element.value;
            } else {
              formData[element.name] += `, ${element.value}`;
            }
          }
        } else {
          formData[element.name] = element.value;
        }
      }
    }
    console.log(formData);
  });
</script>

五、JS获取表单数据并求和

有时候，我们需要对表单数据做一些复杂的处理，例如求和、计算平均值等。下面是一个简单的例子，展示如何获取表单中的数值数据并求和：

<form id="myForm">
  <input type="number" name="number1">
  <input type="number" name="number2">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表单默认提交事件
    let sum = 0;
    for (let i = 0; i < form.elements.length; i++) {
      const element = form.elements[i];
      if (element.type === 'number') {
        sum += parseInt(element.value);
      }
    }
    console.log(sum);
  });
</script>

六、JS获取form表单数据

如果我们有多个表单，我们需要分别处理每个表单的提交事件。这时候，我们可以通过在form标签上添加`data-type`属性来进行区分。例如：

<form id="form1" data-type="type1">
  <!-- ... -->
</form>

<form id="form2" data-type="type2">
  <!-- ... -->
</form>

然后在JS代码中，我们可以根据`data-type`属性值来进行判断，如下所示：

<script>
  const forms = document.getElementsByTagName('form');
  for (let i = 0; i < forms.length; i++) {
    const form = forms[i];
    form.addEventListener('submit', event => {
      event.preventDefault(); // 阻止表单默认提交事件

      // 获取 data-type 属性
      const type = form.dataset.type;

      // 获取表单数据的方式略
      // ...

      // 处理数据的方式略
      // ...
    });
  }
</script>

七、jQuery获取表单数据

如果使用jQuery，我们可以使用`serializeArray()`和`serialize()`两种方法来获取表单数据。其中，`serializeArray()`可以将表单数据转换成一个键值对数组，`serialize()`则以URL编码的方式返回表单数据。下面是一个示例代码：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  const form = $('#myForm');
  form.submit(event => {
    event.preventDefault(); // 阻止表单默认提交事件
    const formData = form.serializeArray();
    console.log(formData);
  });
</script>

八、获取表单数据存入数据库

最后，我们来讲一下如何将表单数据存入数据库。首先，前端需要将表单数据发送到后端，后端再进行存储等操作。可以使用AJAX技术进行数据的发送和接收，也可以直接使用form标签的`action`和`method`属性指定表单提交的地址和方式。下面是一个简单的示例代码：

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = $('#myForm');
  form.submit(event => {
    event.preventDefault(); // 阻止表单默认提交事件
    $.ajax({
      url: form.attr('action'),
      type: form.attr('method'),
      data: form.serialize(),
      success: response => {
        console.log(response);
      }
    });
  });
</script>

以上就是JS获取表单数据的各种方法，希望对你有所帮助。