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