欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)的form轉(zhuǎn)json經(jīng)典示例

 更新時間:2017年10月10日 11:15:56   作者:JEECG開源社區(qū)  
這篇文章主要介紹了jQuery實現(xiàn)的form轉(zhuǎn)json功能,結(jié)合完整實例形式分析了jQuery將form表單數(shù)據(jù)封裝成json傳輸?shù)木唧w步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(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>無標題文檔</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>進貨人 :
  <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">商品價格</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操作,這里再為大家推薦幾款比較實用的json在線工具供大家參考使用:

在線JSON代碼檢驗、檢驗、美化、格式化工具:
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擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計有所幫助。

相關(guān)文章

  • Boostrap實現(xiàn)的登錄界面實例代碼

    Boostrap實現(xiàn)的登錄界面實例代碼

    Bootstrap它是一個開源的web開發(fā)前端框架。本界面使用的Bootstrap是v3.3.5版本。這篇文章給大家?guī)砹嗽敿毜膶崿F(xiàn)代碼,非常不錯,感興趣的朋友一起看看吧
    2016-10-10
  • jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例

    jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例

    這篇文章主要對jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • JQUERY CHECKBOX全選,取消全選,反選方法三

    JQUERY CHECKBOX全選,取消全選,反選方法三

    最近一直研究JQUERY的CHECKBOX,前面我已經(jīng)介紹了CHECKBOX的全選和取消全選,而今天我繼續(xù)給大家分享第三種方法,同時還能實現(xiàn)CHECKBOX的反選和指定選取,當然我們得先下載
    2008-08-08
  • jquery實現(xiàn)擲骰子小游戲

    jquery實現(xiàn)擲骰子小游戲

    這篇文章主要為大家詳細介紹了jquery實現(xiàn)擲骰子小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • 利用jquery實現(xiàn)瀑布流3種案例

    利用jquery實現(xiàn)瀑布流3種案例

    這篇文章主要為大家詳細介紹了利用jquery實現(xiàn)瀑布流2種案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • jQuery內(nèi)容選擇器與表單選擇器實例分析

    jQuery內(nèi)容選擇器與表單選擇器實例分析

    這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結(jié)合實例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下
    2019-06-06
  • 網(wǎng)頁下載文件期間如何防止用戶對網(wǎng)頁進行其他操作

    網(wǎng)頁下載文件期間如何防止用戶對網(wǎng)頁進行其他操作

    網(wǎng)頁下載文件時需要一段時間,在這期間如何防止用戶對網(wǎng)頁進行其他操作,將div覆蓋在網(wǎng)頁上,將網(wǎng)頁鎖住,具體實現(xiàn)如下
    2014-06-06
  • jquery實現(xiàn)圖片上傳前本地預(yù)覽功能

    jquery實現(xiàn)圖片上傳前本地預(yù)覽功能

    這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)圖片上傳前本地預(yù)覽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • Jquery日歷插件制作簡單日歷

    Jquery日歷插件制作簡單日歷

    本文給大家分享一款jquery日歷插件,使用jquery日歷插件做日歷,外觀美觀給用戶帶來極好的用戶體驗。對jquery日歷插件感興趣的朋友參考下本篇文章
    2015-10-10
  • jquery插件開發(fā)之實現(xiàn)jquery手風(fēng)琴功能分享

    jquery插件開發(fā)之實現(xiàn)jquery手風(fēng)琴功能分享

    需要一個手風(fēng)琴效果,就動手寫了一個。其實有多個現(xiàn)成的jQuery手風(fēng)琴插件可以用,但對比了一下,總感覺有些笨重,還是自己寫的脈絡(luò)自己最清楚,擴展起來也更容易些
    2014-03-03

最新評論