jquery form表单序列化为对象的示例代码

下面是关于 jQuery form表单序列化为对象 的完整攻略：

什么是jQuery form表单序列化为对象

首先说明下，什么是jQuery form表单序列化为对象，它是指将 HTML 表单元素的值编码成具有键值对的字符串，同时也可以方便地将表单元素的值转换成 JSON 对象，以便于提交表单数据或者进行其他用途。

jQuery form表单序列化为对象的示例代码

下面，就来讲一下如何使用jQuery实现form表单序列化为对象。

示例代码一：

• HTML：

<form id="form" class="form" method="POST">
  <input type="text" name="name" />
  <input type="text" name="age" />
  <button type="submit">提交</button>
</form>

• JS：

var formData = $('#form').serializeArray();
var formObj = {};
$.each(formData, function(key, data){
  formObj[data.name] = data.value;
});
console.log(formObj);

• 示例说明：
• 首先，我们需要利用jQuery选择器获取到表单元素对象；
• 然后，通过jQuery的serializeArray方法，将表单元素的所有键值对组成一个数组；
• 使用each方法遍历这个数组，将每个键值对放入一个JS对象中；
• 最终得到一个JS对象，可以将其作为普通的JSON对象使用。

示例代码二：

• HTML：

<form id="form" class="form" method="POST">
  <input type="text" name="name" />
  <input type="text" name="age" />
  <button type="submit">提交</button>
</form>

• JS：

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

• 示例说明：
• 通过jQuery选择器获取表单元素；
• 使用serializeArray方法将表单元素序列化成一个JSON数组；
• 使用reduce方法将数组中的每一项添加到一个新的对象中，以获取JSON对象。

总结

以上就是 jQuery form表单序列化为对象的完整攻略。其中，我们可以使用serializeArray方法将HTML表单元素序列化成JSON数组，然后进一步通过遍历实现成JSON对象，以方便处理表单元素数据。