jQuery ajax中使用serialize() 方法提交表单数据

最新推荐文章于 2022-06-09 08:52:09 发布

转载最新推荐文章于 2022-06-09 08:52:09 发布 · 4.1k 阅读

JavaScript 同时被 2 个专栏收录

82 篇文章

订阅专栏

ajax

9 篇文章

订阅专栏

使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对（key1=value1&key2=value2…）后提交。 serialize() 方法使用标准的 URL-encoded 编码表示文本字符串. 页面上必须使用name属性

  页面代码： 

 
  
 
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
     <title></title>
     <link href="Styles/default.css" rel="stylesheet" type="text/css" />
     <link href="Scripts/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
     <link href="Scripts/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
     <script src="Scripts/jquery-easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script src="Scripts/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
     <script src="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $("#button").click(function () {
                 $.ajax({
                     cache: true,
                     type: "POST",
                     url: 'ashx/GetTree.ashx?action=Ajax',//提交的URL
                     data: $('#form1').serialize(), // 要提交的表单,必须使用name属性
                     async: false,                    
                     success: function (data) {
                         $("#common").html(data);//输出提交的表表单
                     },
                     error: function (request) {
                         alert("Connection error");
                     }
                 });
             });
         });        
     </script>
 </head>
 <body style="background: white">
     <form id="form1" runat="server">
     <div id="divU" style="height: 200px">
         <table cellpadding="0" cellspacing="1px" border="0" style="width: 100%;" bgcolor="b5d6e6">
             <tr style="background-color: White; height: 32px;">
                 <td style="width: 80px; padding-left: 5px">
                     姓名:
                 </td>
                 <td style="padding: 5px">
                     <input name="name" type="text"></input>
                 </td>
             </tr>
             <tr style="background-color: White; height: 32px;">
                 <td style="width: 80px; padding-left: 5px">
                     邮箱:
                 </td>
                 <td style="padding: 5px">
                     <input name="email" type="text"></input>
                 </td>
             </tr>
             <tr style="background-color: White; height: 32px;">
                 <td style="width: 80px; padding-left: 5px">
                     电话:
                 </td>
                 <td style="padding: 5px">
                     <input name="phone" type="text"></input>
                 </td>
             </tr>
             <tr style="background-color: White; height: 32px;">
                 <td style="width: 80px; padding-left: 5px">
                 </td>
                 <td style="padding: 5px">
                     <input type="button" id="button" value="提交"></input>
                 </td>
             </tr>
         </table>
         <div id="common">
         </div>
     </div>
     </form>
 </body>
 </html>
 
  
 

jQuery ajax：

 
$.ajax({
        type: "POST",
 
        url: ajaxCallUrl,
 
        data: "Key=Value&Key2=Value2",
 
        success: 
 function(msg){alert(msg);}
 
     });

ajax serialize():

 
$.ajax({
          type: "POST",
 
          url:ajaxUrl,
 
          data:$('#form1').serialize(),
 // 要提交的表单 
          success: 
 function(msg) {alert(msg);}
 
      });