第jQuery實現(xiàn)的form轉json經典示例!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd"

htmlxmlns="/1999/xhtml"

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/

scripttype="application/javascript"src="js/jquery-2.0.3.js"/script

title無標題文檔/title

scripttype="application/javascript"

$.fn.serializeObject=function()

varo={};

vara=this.serializeArray();

$.each(a,function(){

if(o[]){

if(!o[].push){

o[]=[o[]];

o[].push(this.value||'');

}else{

o[]=this.value||'';

returno;

functiononClik(){

//vardata=$("#form1").serializeArray();//自動將form表單封裝成json

//alert(JSON.stringify(data));

varjsonuserinfo=$('#form1').serializeObject();

alert(JSON.stringify(jsonuserinfo));

/script

/head

body

formid="form1"name="form1"method="post"action=""

p進貨人:

labelfor="name"/label

inputtype="text"name="name"id="name"/

p性別:

labelfor="sex"/label

selectname="sex"size="1"id="sex"

optionvalue="1"男/option

optionvalue="2"女/option

/select

tablewidth="708"border="1"

tdwidth="185"商品名/td

tdwidth="205"商品數(shù)量/td

tdwidth="296"商品價格/td

/tr

tdlabelfor="pro_name"/label

inputtype="text"name="pro_name"id="pro_name"http://td

tdlabelfor="pro_num"/label

inputtype="text"name="pro_num"id="pro_num"http://td

tdlabelfor="pro_price"/label

inputtype="text"name="pro_price"id="pro_price"http://td

/tr

tdinputtype="text"name="pro_name2"id="pro_name2"http://td

tdinputtype="text"name="pro_num2"id="pro_num2"http://td

tdinputtype="text"name="pro_price2"id="pro_price2"http://td

/tr

/table

p/p

inputtype="button"name="submit"value="提交"/

/form

/body

/html

代碼效果演示：

PS：關于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用：

在線JSON代碼檢驗、檢驗、美化、格式化工具：

/code/json

JSON在線格式化工具：

/code/jsonformat

在線XML/JSON互相轉換工具：

/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉換工具：

/code/jsoncodeformat

在線json壓縮/轉義工具：

/code/json_yasuo_trans

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQueryform操作技巧匯總》、《jQuer