Jquery 将表单serialize序列化转为Json对象

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

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

     /**  

* 重置form表单

* @param formId form的id

*/

function resetQuery(formId){

var fid = "#" + formId;

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

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

var ob= strToObj(str);

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

}

function strToObj(str){

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

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

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

obj = eval(str);

return obj;

}

个人感觉这样做有bug。

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

下面是表单:

Jquery插件代码如下:

(function($){  

$.fn.serializeJson=function(){

var serializeObj={};

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

serializeObj[this.name]=this.value;

});

return serializeObj;

};

})(jQuery);

下面测试一下:

$("#myForm").bind("submit",function(e){

e.preventDefault();

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

});

测试结果:

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

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

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

(function($){  

$.fn.serializeJson=function(){

var serializeObj={};

var array=this.serializeArray();

var str=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;

}

});

return serializeObj;

};

})(jQuery);

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

测试如下:

表单:

I have a bike

I have a car

测试结果:

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

[via]

评论

Popular Posts

高硼硅玻璃水杯

《小狗钱钱》[德] 博多·舍费尔

如何做好个人防疫?

新概念英语PDF扫描版

当10086话务员那不为人知的尴尬事

《小张和小丽》开开五五零

拥有以下6个特点的伴侣比较容易幸福

MIFARE Classic Tool - 安卓NFC门禁卡修改工具

《小宝贝》夏天播放 丽江鼓手夏夏