码迷,mamicode.com
首页 > Web开发 > 详细

表单的序列化ajax

时间:2017-03-27 21:15:20      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:返回   ++   html4   back   serial   option   数字   ajax   url   

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 7     <script type="text/javascript">
 8         $(document).ready(function(){
 9             $("#ajaxbutton").click(function(){
10                 //表单序列化 他返回的是字符串
11                 //var data = $("#form1").serialize();
12                 //序列化成三个数据对象
13                 var data = $("#form1").serializeArray();
14                 alert(data);//alert:只能打印字符串,数字,并不能打印很全面信息
15                 console.info(data);
16                 //输出数组
17                 for(var i=0;i<data.length;i++){
18                     alert(data[i].name+" : "+data[i].value);
19                 }
20                 var option ={
21                     "url" :"/jquery_day02/FormServlet",
22                     "data":data,
23                     "type":"POST",
24                     "success":function(data){
25                         //用于接受服务器响应的数据
26                     }
27                     
28                 };
29                 
30                 $.ajax(option);
31             });
32         }); 
33         
34         
35     </script>
36     
37 </head>
38 <body>
39     <h3>表单</h3>
40     <form id="form1">
41         <table border="1" >
42             <tr id="tr1">
43                 <td class=""><label>姓名</label></td>
44                 <td><input type="text" name="username"  value="jack" /></td>
45             </tr>
46             <tr>
47                 <td class=""><span>密码</span></td>
48                 <td><input type="password" name="password" value="1234" /></td>
49             </tr>
50             <tr>
51                 <td><input type="button"  value= "异步提交表单"  id="ajaxbutton"/></td>
52             </tr>
53             
54         </table>
55     </form>
56     
57     
58     <h3>公告信息</h3>
59     <div>
60         未满18慎进
61     </div>
62     
63         
64 </body>
65 </html>

 

表单的序列化ajax

标签:返回   ++   html4   back   serial   option   数字   ajax   url   

原文地址:http://www.cnblogs.com/geyaofendou/p/6628688.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!