jQuery将表单数据序列化为对象 - Javascript

在Web开发中，表单是一个非常常见的元素。通常情况下，我们需要将表单中用户输入的数据序列化成一个对象进行处理。jQuery提供了很方便的方法来实现这个功能。

序列化表单数据

通过jQuery的serialize()方法可以将表单数据序列化为字符串：

$('form').serialize();

这会将表单中所有带有name属性的元素的数据序列化为键值对形式的字符串。例如：

<form>
  <input type="text" name="username" value="John">
  <input type="text" name="email" value="john@example.com">
</form>

$('form').serialize(); // 'username=John&email=john%40example.com'

将序列化数据转化为对象

虽然序列化后的字符串非常容易进行传输和存储，但是在JavaScript中处理和访问这些数据会非常麻烦。为了方便起见，我们可以将序列化后的字符串转化为对象形式。

通过serializeArray()方法可以将序列化后的数据转化为一个数组，每个元素包含了name和value属性，例如：

$('form').serializeArray(); 
// [
//   { name: 'username', value: 'John' },
//   { name: 'email', value: 'john@example.com' }
// ]

通过循环遍历这个数组，我们可以将数据转化为对象形式，例如：

var formData = {};

$('form').serializeArray().forEach(function (input) {
  formData[input.name] = input.value;
});

console.log(formData);
// { username: 'John', email: 'john@example.com' }

使用jQuery扩展方法自动转化

除了自己手动转化数据外，我们还可以使用jQuery扩展方法自动将序列化数据转换为对象。这可以通过使用deserialize()方法来实现：

$.fn.deserialize = function (serializedString) {
  var formData = {};

  serializedString.split('&').forEach(function (input) {
    var pair = input.split('=');
    formData[pair[0]] = decodeURIComponent(pair[1] || '');
  });

  return formData;
};

现在我们可以直接使用deserialize()方法，将序列化后的字符串转化为对象：

var serializedData = $('form').serialize();
var formData = $('form').deserialize(serializedData);

console.log(formData);
// { username: 'John', email: 'john@example.com' }

结论

使用jQuery将表单数据序列化为对象，可以极大地简化我们在Web开发中对表单数据的处理。如果你经常需要处理表单数据，jQuery提供的这些方法肯定会为你节省不少时间和精力。