serilize() serilizeArray() 与基于serilizeArray()的serilizeObject()

serilize():

$('form').submit(function() {  alert($(this).serialize());  return false;});

输出标准的查询字符串：

a=1&b=2&c=3&d=4&e=5

serilizeArray():

返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

[   {name: 'firstname', value: 'Hello'},   {name: 'lastname', value: 'World'},  {name: 'alias'}, // 值为空]

jQuery有方法$.fn.serialize，可将表单序列化成字符串；有方法$.fn.serializeArray，可将表单序列化成数组,返回 JSON 数据结构数据。。
如果需要其序列化为JSON对象，那么可以基于serializeArray编写方法serializeObject轻松实现：

[javascript] view plain copy

 print?

1. //work with jQuery 1.x  
2. jQuery.prototype.serializeObject=function(){  
3.     var obj=new Object();  
4.     $.each(this.serializeArray(),function(index,param){  
5.         if(!(param.name in obj)){  
6.             obj[param.name]=param.value;  
7.         }  
8.     });  
9.     return obj;  
10. };  

注：当表单中参数出现同名时，serializeObject会取第一个，而忽略后续的。

设有

[html] view plain copy

 print?

1. <form>  
2.     <input type="text" name="username" />  
3.     <input type="text" name="password" />  
4. </form>  

则

[javascript] view plain copy

 print?

1. jQuery("form").serialize(); //"username=&password="  
2. jQuery("form").serializeArray(); //[{name:"username",value:""},{name:"password",value:""}]  
3. jQuery("form").serializeObject(); //{username:"",password:""}  

+ 此版本不再兼容IE8
+ 修复一个逻辑错误

[javascript] view plain copy

 print?

1. //work with jQuery 2.x  
2. jQuery.prototype.serializeObject=function(){  
3.     var hasOwnProperty=Object.prototype.hasOwnProperty;  
4.     return this.serializeArray().reduce(function(data,pair){  
5.         if(!hasOwnProperty.call(data,pair.name)){  
6.             data[pair.name]=pair.value;  
7.         }  
8.         return data;  
9.     },{});  
10. };  

+ 减少方法依赖，扩大兼容范围
+ 改用原生循环，提升代码性能

[javascript] view plain copy

 print?

1. //work with jQuery Compact 3.x  
2. jQuery.prototype.serializeObject=function(){  
3.     var a,o,h,i,e;  
4.     a=this.serializeArray();  
5.     o={};  
6.     h=o.hasOwnProperty;  
7.     for(i=0;i<a.length;i++){  
8.         e=a[i];  
9.         if(!h.call(o,e.name)){  
10.             o[e.name]=e.value;  
11.         }  
12.     }  
13.     return o;  
14. };