将JavaScript的jQuery库中表单转化为JSON对象的方法
大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。
我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成“:”、“‘”:
/** *重置form表单 *@paramformIdform的id */ functionresetQuery(formId){ varfid="#"+formId; varstr=$(fid).serialize(); //str=cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04 varob=strToObj(str); alert(ob.startdate);//2012-02-01 } functionstrToObj(str){ str=str.replace(/&/g,"','"); str=str.replace(/=/g,"':'"); str="({'"+str+"'})"; obj=eval(str); returnobj; } /** *重置form表单 *@paramformIdform的id */ functionresetQuery(formId){ varfid="#"+formId; varstr=$(fid).serialize(); //str=cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04 varob=strToObj(str); alert(ob.startdate);//2012-02-01 } functionstrToObj(str){ str=str.replace(/&/g,"','"); str=str.replace(/=/g,"':'"); str="({'"+str+"'})"; obj=eval(str); returnobj; }
个人感觉这样做有bug。
我的方法是,先用serializeArray序列化为数组,再封装为Json对象。
下面是表单:
<formid="myForm"action="#"> <inputname="name"/> <inputname="age"/> <inputtype="submit"/> </form> <formid="myForm"action="#"> <inputname="name"/> <inputname="age"/> <inputtype="submit"/> </form>
Jquery插件代码如下:
(function($){ $.fn.serializeJson=function(){ varserializeObj={}; $(this.serializeArray()).each(function(){ serializeObj[this.name]=this.value; }); returnserializeObj; }; })(jQuery); (function($){ $.fn.serializeJson=function(){ varserializeObj={}; $(this.serializeArray()).each(function(){ serializeObj[this.name]=this.value; }); returnserializeObj; }; })(jQuery);
下面测试一下:
$("#myForm").bind("submit",function(e){ e.preventDefault(); console.log($(this).serializeJson()); }); e.preventDefault(); console.log($(this).serializeJson()); });
测试结果:
输入a,b提交,得到序列化结果
{age:"b",name:"a"}
上面的插件,不能适用于有多个值的输入控件,例如复选框、多选的select。下面,我将插件做进一步的修改,让其支持多选。代码如下:
(function($){ $.fn.serializeJson=function(){ varserializeObj={}; vararray=this.serializeArray(); varstr=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); returnserializeObj; }; })(jQuery); (function($){ $.fn.serializeJson=function(){ varserializeObj={}; vararray=this.serializeArray(); varstr=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); returnserializeObj; }; })(jQuery);
这里,我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式,请自行修改相应代码。
测试如下:
表单:
<formid="myForm"action="#"> <inputname="name"/> <inputname="age"/> <selectmultiple="multiple"name="interest"size="2"> <optionvalue="interest1">interest1</option> <optionvalue="interest2">interest2</option> <optionvalue="interest3">interest3</option> <optionvalue="interest4">interest4</option> </select> <inputtype="checkbox"name="vehicle"value="Bike"/>Ihaveabike <inputtype="checkbox"name="vehicle"value="Car"/>Ihaveacar <inputtype="submit"/> </form> <formid="myForm"action="#"> <inputname="name"/> <inputname="age"/> <selectmultiple="multiple"name="interest"size="2"> <optionvalue="interest1">interest1</option> <optionvalue="interest2">interest2</option> <optionvalue="interest3">interest3</option> <optionvalue="interest4">interest4</option> </select> <inputtype="checkbox"name="vehicle"value="Bike"/>Ihaveabike <inputtype="checkbox"name="vehicle"value="Car"/>Ihaveacar <inputtype="submit"/> </form>
测试结果:
{age:"aa",interest:["interest2","interest4"],name:"dd",vehicle:["Bike","Car"]}
处理序列化时的空格问题
jquery的serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能;但是实际使用中有时会出现如下问题:
例如
<inputname="content"value="ddd567"/>
在执行serialize()方法后,得到的却是 ddd+567这样的字符串;即jquery的序列化方法对空格进行了转义,转换成了+号。
解决方法
由于serialize()方法对真正的“+”号转义的是%2B,所以可以对serialize()后的结果进行符号替换。
例如
<inputname="content"value="ddd+567+987"/> <script> vara=$('$frm1').serialize();//序列化,默认会调用encodeURIComponent()进行编码 alert(a);//content=ddd+++567+++987 varb=a.replace(/\\+/g,"");//g表示对整个字符串中符合条件的都进行替换 b=decodeURIComponent(b);//对serialize后的内容进行解码 alert(b);//content=ddd+567+987 </script>