form表单序列化JSON

1. 简单属性的表单域，序列化后只有一层JSON对象

/**
  * 功能：序列化form表单数据成Json对象
  * 1.name均是简单的一级对象
  * 2.同名的name属性，值会被序列化为数组，例如checkbox等控件
  */
$.fn.serializeObject = function() {
    var json = {};
    var arrObj = this.serializeArray();
    $.each(arrObj, function() {
      if (json[this.name]) {
           if (!json[this.name].push) {
            json[this.name] = [ json[this.name] ];
           }
           json[this.name].push(this.value || '');
      } else {
           json[this.name] = this.value || '';
      }
    });
    return json;
};

---

2. 有嵌套属性的表单域，序列化成有嵌套结构的JSON对象

 /** 
 * 功能：序列化form表单元素
 * 1.同名的name属性，值会被序列化为数组，例如checkbox等控件
 * 2.可以嵌套对象，name和value会被序列化为嵌套的json对象格式
 * 3.可以嵌套对象列表，name和value会被序列化成嵌套的json数组对象
 */
 $.fn.serializeNestedObject = function() {
     var json = {};  
     var arrObj = this.serializeArray();
     //alert(JSON.stringify(arrObj));
     $.each(arrObj, function() {
          // 对重复的name属性，会将对应的众多值存储成json数组
          if (json[this.name]) {  
               if (!json[this.name].push) {
                json[this.name] = [ json[this.name] ];
               }
               json[this.name].push(this.value || '');
          } else {
               // 有嵌套的属性，用'.'分隔的
               if (this.name.indexOf('.') > -1) {
                    var pos = this.name.indexOf('.');
                    var key =  this.name.substring(0, pos);
                    // 判断此key是否已存在json数据中，不存在则新建一个对象出来
                    if(!existKeyInJSON(key, json)){
                     json[key] = {};
                    }
                    var subKey = this.name.substring(pos + 1);
                    json[key][subKey] = this.value || '';
               }
               // 普通属性
               else{
                    json[this.name] = this.value || '';
               }

          }
     });

     // 处理那些值应该属于数组的元素，即带'[number]'的key-value对
     var resultJson = {};
     for(var key in json){
          // 数组元素
          if(key.indexOf('[') > -1){
               var pos = key.indexOf('[');
               var realKey =  key.substring(0, pos);
               // 判断此key是否已存在json数据中，不存在则新建一个数组出来
               if(!existKeyInJSON(realKey, resultJson)){
                resultJson[realKey] = [];
               }
               resultJson[realKey].push(json[key]);

          }
          else{ // 单元素
               resultJson[key] = json[key];
          }
     }
     return resultJson;
 };

/**
 * 功能：判断key在Json结构中是否存在
 * 存在，返回true; 否则，返回false.
 */
 function existKeyInJSON(key, json){
      if(key == null || key == '' || $.isEmptyObject(json)){
           return false;
      }
      var exist = false;
      for(var k in json){
        if(key === k){
            exist = true;
        }
      }
      return exist;
 }

【说明】上面serializeNestedObject()方法调用了一个existKeyInJSON()方法，对简单的name属性，多个相同的name的值会序列化为数组，而复杂的name属性后面会覆盖前面的即只会有单一值。
调用方式：(引入jquery库文件)

var formJson = $("#fm1").serializeObject();
$("#outDiv0").append(JSON.stringify(formJson));

var formObj = $("#fm1").serializeNestedObject();
$("#outDiv").append(JSON.stringify(formObj));

示例HTML代码：

<form id="fm1">
 <table>
 <tr><td><label>学校名称：label> td><td><input type="text" name="collegeName" value="软件学院"/>td>tr>
 <tr><td><label>校址：label> td><td><input type="text" name="location" value="滇池海梗大坝"/>td>tr>

 
 <tr><td><label>博士编号：label> td><td><input type="text" name="doctor.dCode" value="DT_X0135"/>td>tr>
 <tr><td><label>教龄：label> td><td><input type="text" name="doctor.dAge" value="10"/>td>tr>

 
 <tr><td><label>讲师编号：label> td><td><input type="text" name="teacher.name" value="TH001"/>td>tr>
 <tr><td><label>工龄：label> td><td><input type="text" name="teacher.workAge" value="15"/>td>tr>

 
 <tr><td><label>专业代号一：label> td><td><input type="text" name="profession[0].code" value="PH_SOFTWARE"/>td>tr> 
 <tr><td><label>专业名称一：label> td><td><input type="text" name="profession[0].content" value="软件工程"/>td>tr>
 <tr><td><label>课程一：label> td><td><input type="text" name="profession[0].course" value="C语言,Java编程,Linux服务编程"/>td>tr>

 <tr><td><label>专业代号二：label> td><td><input type="text" name="profession[1].code" value="PH_COMPUTER"/>td>tr>
 <tr><td><label>专业名称二：label> td><td><input type="text" name="profession[1].content" value="计算机"/>td>tr>
 <tr><td><label>课程二：label> td><td><input type="text" name="profession[1].course" value="汇编语言,数据结构算法,phython编程"/>td>tr>

 <tr><td><label>专业代号三：label> td><td><input type="text" name="profession[2].code" value="PH_TELINFORMATION"/>td>tr>
 <tr><td><label>专业名称三：label> td><td><input type="text" name="profession[2].content" value="电子信息"/>td>tr>
 <tr><td><label>课程三：label> td><td><input type="text" name="profession[2].course" value="通信原理,网络通讯"/>td>tr>

 
 <tr><td><label>学位A：label> td><td><input type="checkbox" checked name="degree" value="学士"/>td>tr>
 <tr><td><label>学位B：label> td><td><input type="checkbox" checked name="degree" value="硕士"/>td>tr>

 
 <tr><td><label>课程三(覆盖属性)：label> td><td><input type="text" name="profession[2].course" value="通信原理2,网络通讯2"/>td>tr>
 table>

 <div style="border: 2px solid brown; height: auto;">
   <span>简单json序列化：span><p  id="outDiv0">p>
   <hr/>
  <span>有嵌套属性json序列化：span><p  id="outDiv">p>
 div>
 form>

后台对应的JAVA VO对象

public class College {

 // 简单属性
 private String collegeName;
 private String location;

 // 嵌套对象属性
 private Doctor doctor;
 private Teacher teacher;

 // 对象列表属性
 private List profession;
 // 基本类型列表属性
 private List degree;


 // …… get/set方法

}

//嵌套对象
class Doctor{
 private String dCode;
 private String dAge;

 // …… get/set方法
}
//嵌套对象
class Teacher{
 private String name;
 private String workAge;

 // …… get/set方法
}
//嵌套对象
class Profession{
 private String code;
 private String content;
 private String course;

 // …… get/set方法
}