获取表单数据作为对象 jQuery

在网页开发中，经常需要对表单进行处理，包括获取用户填写的数据、对数据进行验证、提交数据等。这时就需要用到jQuery库中的表单处理方法。

本文将介绍如何使用jQuery获取表单数据并将其转化为JavaScript对象，以便于进一步处理。

代码片段

$(document).ready(function() {
  // 监听表单提交事件
  $('form').submit(function(event) {
    // 阻止表单提交的默认行为，后面会通过AJAX提交表单数据
    event.preventDefault();
    // 将表单数据转化为JavaScript对象
    var formData = $('form').serializeArray()
      .reduce(function(obj, item) {
        obj[item.name] = item.value;
        return obj;
      }, {});
    // 打印表单数据对象
    console.log(formData);
    // 发送AJAX请求提交表单数据
    $.ajax({
      url: '/submit',
      type: 'POST',
      data: formData,
      success: function(response) {
        // 表单提交成功后的回调函数
      },
      error: function(error) {
        // 表单提交失败后的回调函数
      }
    });
  });
});

代码解释

表单监听

$('form').submit(function(event) {
  // 阻止表单提交的默认行为，后面会通过AJAX提交表单数据
  event.preventDefault();
  // ...
});

首先通过$('form')选取表单元素，并监听submit事件。在事件处理函数中，使用event.preventDefault()方法阻止表单的默认提交行为，以便自行处理表单数据。

转化为JavaScript对象

var formData = $('form').serializeArray()
  .reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
  }, {});
console.log(formData);

$('form').serializeArray()方法将表单序列化为一个数组，每个元素包含name和value属性。通过Array.prototype.reduce()方法，将数组中的每个元素转化为一个属性名和属性值均为字符串的JavaScript对象。

在上面的代码中，reduce()方法的初始值为一个空对象{}。对于数组中的一个元素，会将其name属性作为对象的属性名，将其value属性作为对象的属性值，然后返回更新后的对象。最终，整个表单数据就转化为了一个JavaScript对象，并通过console.log()打印出来。

AJAX提交表单数据

$.ajax({
  url: '/submit',
  type: 'POST',
  data: formData,
  success: function(response) {
    // 表单提交成功后的回调函数
  },
  error: function(error) {
    // 表单提交失败后的回调函数
  }
});

最后，使用$.ajax()方法向服务器提交表单数据。通过url选项指定服务器接收数据的地址，通过type选项指定HTTP请求方法，这里是POST方法。data选项指定要发送的数据，这里就是前面转化为JavaScript对象的表单数据。

在成功或出错后，会分别调用success和error选项中指定的回调函数，这里只是注释了，在实际开发中，可以根据实际情况进行处理。

结语

本文介绍了如何使用jQuery获取表单数据并转化为JavaScript对象。这是处理表单的基础，后续还可以对表单数据进行验证、格式化等操作，实现更复杂的表单功能。