大家知道Jquery中有serialize方法，可以將表單序列化為一個(gè)“&”連接的字符串，但卻沒有提供序列化為Json的方法。不過(guò)，我們可以寫一個(gè)插件實(shí)現(xiàn)。
我在網(wǎng)上看到有人用替換的方法，先用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;
}
個(gè)人感覺這樣做有bug。
我的方法是，先用serializeArray序列化為數(shù)組，再封裝為Json對(duì)象。
下面是表單：
<form id=”myForm” action=”#”>
<input name=”name”/>
<input name=”age”/>
<input type=”submit”/>
</form>
Jquery插件代碼如下：
(function($){
$.fn.serializeJson=function(){
var serializeObj={};
$(this.serializeArray()).each(function(){
serializeObj[this.name]=this.value;
});
return serializeObj;
};
})(jQuery);
下面測(cè)試一下：$(“#myForm”).bind(“submit”,function(e){
輸入a，b提交，得到序列化結(jié)果
{age: “b”,name: “a”}
上面的插件，不能適用于有多個(gè)值的輸入控件，例如復(fù)選框、多選的select。下面，我將插件做進(jìn)一步的修改，讓其支持多選。代碼如下：
Js代碼
(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);
這里，我將多選的值封裝為一個(gè)數(shù)值來(lái)進(jìn)行處理。如果大家使用的時(shí)候需要將多選的值封裝為“,”連接的字符串或者其他形式，請(qǐng)自行修改相應(yīng)代碼。
測(cè)試如下：
表單：
測(cè)試結(jié)果：
{age: “aa”,interest: ["interest2", "interest4"],name: “dd”,vehicle:["Bike","Car"]}
來(lái)自：http://www.wufangbo.com/jquery-form-to-json/
聯(lián)系客服
