大家知道Jquery中有serialize方法，可以將表單序列化為一個(gè)“&”連接的字符串，但卻沒有提供序列化為Json的方法。不過，我們可以寫一個(gè)插件實(shí)現(xiàn)。

我在網(wǎng)上看到有人用替換的方法，先用serialize序列化后，將&替換成“：”、“‘”：

個(gè)人感覺這樣做有bug。

我的方法是，先用serializeArray序列化為數(shù)組，再封裝為Json對(duì)象。

下面是表單：

Html代碼  

1. <form id=”myForm” action=”#”>
2.     <input name=”name”/>
3.     <input name=”age”/>
4.     <input type=”submit”/>
5. </form>

Jquery插件代碼如下：

下面測(cè)試一下：$(“#myForm”).bind(“submit”,function(e){

{age: “b”,name: “a”}

上面的插件，不能適用于有多個(gè)值的輸入控件，例如復(fù)選框、多選的select。下面，我將插件做進(jìn)一步的修改，讓其支持多選。代碼如下：

Js代碼

這里，我將多選的值封裝為一個(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./jquery-form-to-json/