jQuery實(shí)現(xiàn)的form轉(zhuǎn)json經(jīng)典示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的form轉(zhuǎn)json功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="application/javascript" src="js/jquery-2.0.3.js"></script> <title>無標(biāo)題文檔</title> <script type="application/javascript"> $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; function onClik(){ //var data = $("#form1").serializeArray(); //自動將form表單封裝成json //alert(JSON.stringify(data)); var jsonuserinfo = $('#form1').serializeObject(); alert(JSON.stringify(jsonuserinfo)); } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p>進(jìn)貨人 : <label for="name"></label> <input type="text" name="name" id="name" /> </p> <p>性別: <label for="sex"></label> <select name="sex" size="1" id="sex"> <option value="1">男</option> <option value="2">女</option> </select> </p> <table width="708" border="1"> <tr> <td width="185">商品名</td> <td width="205">商品數(shù)量</td> <td width="296">商品價(jià)格</td> </tr> <tr> <td><label for="pro_name"></label> <input type="text" name="pro_name" id="pro_name" /></td> <td><label for="pro_num"></label> <input type="text" name="pro_num" id="pro_num" /></td> <td><label for="pro_price"></label> <input type="text" name="pro_price" id="pro_price" /></td> </tr> <tr> <td><input type="text" name="pro_name2" id="pro_name2" /></td> <td><input type="text" name="pro_num2" id="pro_num2" /></td> <td><input type="text" name="pro_price2" id="pro_price2" /></td> </tr> </table> <p> </p> <input type="button" name="submit" onclick="onClik();" value="提交"/> </form> </body> </html>
代碼效果演示:
PS:關(guān)于json操作,這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用:
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- 基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對象
- Jquery 組合form元素為json格式,asp.net反序列化
- jQuery實(shí)現(xiàn)form表單元素序列化為json對象的方法
- 關(guān)于jquery form表單序列化的注意事項(xiàng)詳解
- jquery form表單序列化為對象的示例代碼
- jQuery-serialize()輸出序列化form表單值的方法
- jquery自動將form表單封裝成json的具體實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能示例
相關(guān)文章
Boostrap實(shí)現(xiàn)的登錄界面實(shí)例代碼
Bootstrap它是一個(gè)開源的web開發(fā)前端框架。本界面使用的Bootstrap是v3.3.5版本。這篇文章給大家?guī)砹嗽敿?xì)的實(shí)現(xiàn)代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-10-10jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
這篇文章主要對jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery內(nèi)容選擇器與表單選擇器實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結(jié)合實(shí)例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06網(wǎng)頁下載文件期間如何防止用戶對網(wǎng)頁進(jìn)行其他操作
網(wǎng)頁下載文件時(shí)需要一段時(shí)間,在這期間如何防止用戶對網(wǎng)頁進(jìn)行其他操作,將div覆蓋在網(wǎng)頁上,將網(wǎng)頁鎖住,具體實(shí)現(xiàn)如下2014-06-06jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05jquery插件開發(fā)之實(shí)現(xiàn)jquery手風(fēng)琴功能分享
需要一個(gè)手風(fēng)琴效果,就動手寫了一個(gè)。其實(shí)有多個(gè)現(xiàn)成的jQuery手風(fēng)琴插件可以用,但對比了一下,總感覺有些笨重,還是自己寫的脈絡(luò)自己最清楚,擴(kuò)展起來也更容易些2014-03-03