jQuery 获取表到对象 - Javascript

在Web开发中，表单是不可避免的一部分。而对于表单数据的处理，我们通常会将其转换为对象以便于提交或者处理。本文将介绍如何使用jQuery来获取表单并将其转换为对象。

jQuery获取表单

jQuery提供了多种方法来获取表单，下面是三种常用方法：

• $(form).serialize(): 将表单转换为query string形式。
• $(form).serializeArray(): 将表单转换为包含所有表单元素对象的数组。
• $(form).find(":input").get(): 获取表单下所有的输入元素。

其中，serialize()最为常用，它将表单处理成一个字符串，可以直接用于Ajax请求，示例代码如下：

var formData = $(form).serialize();
$.ajax({
  url: '/submit',
  type: 'POST',
  data: formData,
  success: function(response) {
    console.log(response);
  }
});

如果需要将表单转换为对象，可以使用serializeArray()方法获取表单元素的数组并循环取出每个元素的name和value属性，代码示例如下：

var formArray = $(form).serializeArray();
var formData = {};
$.each(formArray, function(i, field) {
  formData[field.name] = field.value;
});
console.log(formData);

如果想要获取表单下所有的输入元素并转为数组，可以使用find(":input").get()方法，代码示例如下：

var inputArray = $(form).find(":input").get();
console.log(inputArray);

整合成插件

既然我们已经有了获取表单并转换为对象的方法，可以将其整合成一个jQuery插件以便于使用。代码示例如下：

(function($) {
  $.fn.serializeObject = function() {
    var obj = {};
    var formArray = $(this).serializeArray();
    $.each(formArray, function(i, field) {
      obj[field.name] = field.value;
    });
    return obj;
  }
})(jQuery);

在添加了以上代码后，我们就可以在任意表单元素上调用serializeObject()方法来获取表单对象了：

var formData = $(form).serializeObject();
console.log(formData);

结论

以上就是jQuery获取表单到对象的常用方法和插件示例。在实际开发中，我们可以根据需要选择不同的方法来获取表单并处理为需要的数据格式。