The NoteBook of EricKong
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  611 Posts :: 1 Stories :: 190 Comments :: 0 Trackbacks
form 转json最佳示例
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <script type="application/javascript" src="js/jquery-2.0.3.js"></script>  
  6. <title>无标题文档</title>  
  7. <script type="application/javascript">  
  8.   
  9. $.fn.serializeObject = function()    
  10. {    
  11.    var o = {};    
  12.    var a = this.serializeArray();    
  13.    $.each(a, function() {    
  14.        if (o[this.name]) {    
  15.            if (!o[this.name].push) {    
  16.                o[this.name] = [o[this.name]];    
  17.            }    
  18.            o[this.name].push(this.value || '');    
  19.        } else {    
  20.            o[this.name] = this.value || '';    
  21.        }    
  22.    });    
  23.    return o;    
  24. };  
  25.   
  26. function onClik(){  
  27.         //var data = $("#form1").serializeArray(); //自动将form表单封装成json  
  28.         //alert(JSON.stringify(data));  
  29.         var jsonuserinfo = $('#form1').serializeObject();  
  30.         alert(JSON.stringify(jsonuserinfo));  
  31. }  
  32. </script>  
  33. </head>  
  34.   
  35. <body>  
  36. <form id="form1" name="form1" method="post" action="">  
  37.   <p>进货人 :  
  38.     <label for="name"></label>  
  39.     <input type="text" name="name" id="name" />  
  40.   </p>  
  41.   <p>性别:  
  42.     <label for="sex"></label>  
  43.     <select name="sex" size="1" id="sex">  
  44.       <option value="1">男</option>  
  45.       <option value="2">女</option>  
  46.     </select>  
  47.   </p>  
  48.   <table width="708" border="1">  
  49.     <tr>  
  50.       <td width="185">商品名</td>  
  51.       <td width="205">商品数量</td>  
  52.       <td width="296">商品价格</td>  
  53.     </tr>  
  54.     <tr>  
  55.       <td><label for="pro_name"></label>  
  56.         <input type="text" name="pro_name" id="pro_name" /></td>  
  57.       <td><label for="pro_num"></label>  
  58.         <input type="text" name="pro_num" id="pro_num" /></td>  
  59.       <td><label for="pro_price"></label>  
  60.         <input type="text" name="pro_price" id="pro_price" /></td>  
  61.     </tr>  
  62.     <tr>  
  63.       <td><input type="text" name="pro_name2" id="pro_name2" /></td>  
  64.       <td><input type="text" name="pro_num2" id="pro_num2" /></td>  
  65.       <td><input type="text" name="pro_price2" id="pro_price2" /></td>  
  66.     </tr>  
  67.   </table>  
  68.   <p> </p>  
  69.   <input type="button" name="submit" onclick="onClik();" value="提交"/>  
  70. </form>  
  71. </body>  
  72. </html>  
  1. <span style="font-size:32px;"><strong>代码效果演示：</strong></span>  

posted on 2014-06-19 18:39 Eric_jiang 阅读(423) 评论(0)  编辑  收藏 所属分类: JavaScript

只有注册用户登录后才能发表评论。
网站导航: