表单的序列化ajax

时间：2021-06-20 07:09:42
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>

     <script type="text/javascript">

         $(document).ready(function(){

             $("#ajaxbutton").click(function(){

                 //表单序列化 他返回的是字符串

                 //var data = $("#form1").serialize();

                 //序列化成三个数据对象

                 var data = $("#form1").serializeArray();

                 alert(data);//alert:只能打印字符串，数字，并不能打印很全面信息

                 console.info(data);

                 //输出数组

                 for(var i=0;i<data.length;i++){

                     alert(data[i].name+" : "+data[i].value);

                 }

                 var option ={

                     "url" :"/jquery_day02/FormServlet",

                     "data":data,

                     "type":"POST",

                     "success":function(data){

                         //用于接受服务器响应的数据

                     }

                 };

                 $.ajax(option);

             });

         }); 

     </script>

 </head>

 <body>

     <h3>表单</h3>

     <form id="form1">

         <table border="1" >

             <tr id="tr1">

                 <td class=""><label>姓名</label></td>

                 <td><input type="text" name="username"  value="jack" /></td>

             </tr>

             <tr>

                 <td class=""><span>密码</span></td>

                 <td><input type="password" name="password" value="1234" /></td>

             </tr>

             <tr>

                 <td><input type="button"  value= "异步提交表单"  id="ajaxbutton"/></td>

             </tr>

         </table>

     </form>

     <h3>公告信息</h3>

     <div>

         未满18慎进

     </div>

 </body>

 </html>

相关文章