jQuery实现form表单序列化转换为json对象功能示例

下面是详细讲解“jQuery实现form表单序列化转换为json对象功能示例”的完整攻略：

1. 什么是form表单序列化？

form表单序列化，是指将form表单中的所有表单控件的内容（包括文本、单选框、复选框、下拉列表、文本域等）按照一定的格式序列化成为一个字符串。这个字符串格式一般是以“字段名=值”的形式，中间用“&”连接，再加上url地址中的“?”，组成完整的url参数串。

2. jQuery如何实现form表单序列化？

在jQuery中，可以通过调用form表单的.serialize()方法来实现表单序列化。具体使用方法如下：

$(function(){
  var data = $("form").serialize(); //序列化表单
  console.log(data); //输出序列化后的字符串
});

3. jQuery如何将form表单序列化转换为json对象？

在上面的例子中，我们已经能够将form表单序列化成为一个字符串，但如果要将序列化后的字符串转换为json对象呢？实际上，可以使用jQuery中的.serializeArray()方法将序列化后的数据转换为一个由对象组成的数组，然后再通过遍历数组的形式将其转换为json对象。具体使用方法如下：

$(function(){
  var data = $("form").serializeArray(); //序列化表单，生成一个由对象组成的数组
  var json = {}; //定义一个空的json对象
  $.each(data, function() { //使用each函数遍历数组
      if (json[this.name]) { //如果json中已经存在该字段名，则将该字段值转换为数组形式存储
        if (!json[this.name].push) { //如果该字段值还不是数组形式，则将其转换为数组
          json[this.name] = [json[this.name]];
        }
        json[this.name].push(this.value || ''); //将该字段值加入到数组中
      } else { //如果该字段名还未在json中出现，则直接将该字段名和字段值存入json
        json[this.name] = this.value || '';
      }
   });
  console.log(json); //输出转换后的json对象
});

4. 示例说明

示例1

假设有如下html代码：

<form>
  <input type="text" name="username" value="张三">
  <input type="radio" name="sex" value="男" checked>男
  <input type="radio" name="sex" value="女">女
  <select name="city">
    <option value="北京" selected>北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
  </select>
</form>

使用上述代码中的方法，我们可以将该表单序列化成为如下字符串：

username=张三&sex=男&city=北京

然后再将该字符串转换为json对象：

{
  "username": "张三",
  "sex": "男",
  "city": "北京"
}

示例2

假设有如下html代码：

<form>
  <input type="text" name="username" value="王五">
  <input type="checkbox" name="interest" value="篮球" checked>篮球
  <input type="checkbox" name="interest" value="足球">足球
  <input type="checkbox" name="interest" value="游泳" checked>游泳
  <textarea name="intro">这是一个人的介绍</textarea>
</form>

使用上述代码中的方法，我们可以将该表单序列化成为如下字符串：

username=王五&interest=篮球&interest=游泳&intro=这是一个人的介绍

然后再将该字符串转换为json对象：

{
  "username": "王五",
  "interest": [
    "篮球",
    "游泳"
  ],
  "intro": "这是一个人的介绍"
}