Jquery 将表单序列化为Json对象
Jquery 将表单序列化为Json对象
吟啸_徐行 发表于3年前
Jquery 将表单序列化为Json对象
  • 发表于 3年前
  • 阅读 231
  • 收藏 22
  • 点赞 0
  • 评论 7

腾讯云 技术升级10大核心产品年终让利>>>   

大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。

 

我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成“:”、“‘”:

  1. /**  

  2.      * 重置form表单  

  3.      * @param formId  form的id   

  4.      */    

  5.     function resetQuery(formId){    

  6.         var fid = "#" + formId;    

  7.         var str = $(fid).serialize();    

  8.         //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04    

  9.         var ob= strToObj(str);    

  10.         alert(ob.startdate);//2012-02-01    

  11.     }    

  12.         

  13.     function strToObj(str){    

  14.         str = str.replace(/&/g,"','");    

  15.         str = str.replace(/=/g,"':'");    

  16.         str = "({'"+str +"'})";    

  17.         obj = eval(str);     

  18.         return obj;    

  19.     }    

 个人感觉这样做有bug。

 

我的方法是,先用serializeArray序列化为数组,再封装为Json对象。

 

 

下面是表单:

 

  1. <form id="myForm" action="#">  

  2.     <input name="name"/>  

  3.     <input name="age"/>  

  4.     <input type="submit"/>  

  5. </form>  

 

 Jquery插件代码如下:

 

  1. (function($){  

  2.         $.fn.serializeJson=function(){  

  3.             var serializeObj={};  

  4.             $(this.serializeArray()).each(function(){  

  5.                 serializeObj[this.name]=this.value;  

  6.             });  

  7.             return serializeObj;  

  8.         };  

  9.     })(jQuery);  

 

 

下面测试一下:$("#myForm").bind("submit",function(e){

  1.     e.preventDefault();  

  2.     console.log($(this).serializeJson());  

  3. });  

 测试结果:

输入a,b提交,得到序列化结果

{age: "b",name: "a"}

 

 

上面的插件,不能适用于有多个值的输入控件,例如复选框、多选的select。下面,我将插件做进一步的修改,让其支持多选。代码如下:

 

  1. (function($){  

  2.         $.fn.serializeJson=function(){  

  3.             var serializeObj={};  

  4.             var array=this.serializeArray();  

  5.             $(array).each(function(){  

  6.                 if(serializeObj[this.name]){  

  7.                     if($.isArray(serializeObj[this.name])){  

  8.                         serializeObj[this.name].push(this.value);  

  9.                     }else{  

  10.                         serializeObj[this.name]=[serializeObj[this.name],this.value];  

  11.                     }  

  12.                 }else{  

  13.                     serializeObj[this.name]=this.value;   

  14.                 }  

  15.             });  

  16.             return serializeObj;  

  17.         };  

  18.     })(jQuery);  

 这里,我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式,请自行修改相应代码。

 

测试如下:

表单:

 

  1. <form id="myForm" action="#">  

  2.     <input name="name"/>  

  3.     <input name="age"/>  

  4.     <select multiple="multiple" name="interest" size="2">  

  5.         <option value ="interest1">interest1</option>  

  6.         <option value ="interest2">interest2</option>  

  7.         <option value="interest3">interest3</option>  

  8.         <option value="interest4">interest4</option>  

  9.     </select>  

  10.     <input type="checkbox" name="vehicle" value="Bike" /> I have a bike  

  11.     <input type="checkbox" name="vehicle" value="Car" /> I have a car  

  12.     <input type="submit"/>  

  13. </form>  

 测试结果:

{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}


共有 人打赏支持
粉丝 19
博文 107
码字总数 15529
评论 (7)
吟啸_徐行
今天遇到需要处理非常多的页面的不同表单数据才想到统一序列化后ajax上传,不然每个页面都得针对性地敲半天
think2011
用angularjs,完全不需要这种事情
吟啸_徐行

引用来自“think2011”的评论

用angularjs,完全不需要这种事情
膜拜一下,这东西还没用过
丶超_
高手 膜拜!!!
许雷神
谢谢
吟啸_徐行

引用来自“许雷神”的评论

谢谢
寂寞的村民

参考
将Form数据转化成Json对象
http://blog.jdk5.com/zh/convert-form-data-to-javascript-object-with-jquery/
×
吟啸_徐行
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: