表单序列化

 

jQuery - 基于serializeArray的serializeObject

jQuery有方法$.fn.serialize，可将表单序列化成字符串；有方法$.fn.serializeArray，可将表单序列化成数组。
如果需要其序列化为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:""}  

20150125更新
===========
+ 此版本不再兼容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. };  

20150705更新
===========

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

[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. };