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>