Jquery将表单序列化成Json对象

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

方法一 

网上有人用替换的方法，先用serialize序列化后，将&替换成“：”、“‘”：

Js代码

/**
 * 重置form表单 
 * @param formId form的id 
 */ 
 function resetQuery(formId){ 
 var fid = "#" + formId; 
 var str = $(fid).serialize(); 
 var ob= strToObj(str); 
 }

 function strToObj(str){ 
 str = str.replace(/&/g,"','"); 
 str = str.replace(/=/g,"':'"); 
 str = "({'"+str +"'})"; 
 obj = eval(str); 
 return obj; 
 }

方法二

下面采用先将serializeArray序列化为数组，再封装为Json对象。

Html代码

<form id="myForm" action="#"> 
<input name="name"/> 
<input name="password"/> 
<input type="submit"/> 
</form>

Js代码(下面js要引入jquery-*.js)

(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();
    alert(JSON.stringify($(this).serializeJson()));
});

方法三

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

Html代码

<form id="myForm" action="#"> 
    <input name="name"/> 
    <input name="password"/> 
    <select multiple="multiple" name="interest" size="2"> 
        <option value ="interest1">interest1</option> 
        <option value ="interest2">interest2</option> 
        <option value="interest3">interest3</option> 
        <option value="interest4">interest4</option> 
    </select> 
    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike 
    <input type="checkbox" name="vehicle" value="Car" /> I have a car 
    <input type="submit"/> 
</form>

Js代码(下面js要引入jquery-*.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);

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