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

使用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>

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  runat ="server" >
 3      < title ></ title >
 4      < link  href ="Styles/default.css"  rel ="stylesheet"  type ="text/css"   />
 5      < link  href ="Scripts/jquery-easyui/themes/default/easyui.css"  rel ="stylesheet"  type ="text/css"   />
 6      < link  href ="Scripts/jquery-easyui/themes/icon.css"  rel ="stylesheet"  type ="text/css"   />
 7      < script  src ="Scripts/jquery-easyui/jquery-1.7.2.min.js"  type ="text/javascript" ></ script >
 8      < script  src ="Scripts/jquery-easyui/jquery.easyui.min.js"  type ="text/javascript" ></ script >
 9      < script  src ="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js"  type ="text/javascript" ></ script >
10      < script  type ="text/javascript" >
11         $(document).ready( function () {
12             $("#button").click( function () {
13                 $.ajax({
14                     cache:  true,
15                     type: "POST",
16                     url: 'ashx/GetTree.ashx?action=Ajax', // 提交的URL
17                      data: $('#form1').serialize(),  //  要提交的表单
18                      async:  false,                    
19                     success:  function (data) {
20                         $("#common").html(data);
21                     },
22                     error:  function (request) {
23                         alert("Connection error");
24                     }
25                 });
26             });
27 
28         });
29 
30         
31      </ script >
32  </ head >
33  < body  style ="background: white" >
34      < form  id ="form1"  runat ="server" >
35      < div  id ="divU"  style ="height: 200px" >
36          < table  cellpadding ="0"  cellspacing ="1px"  border ="0"  style ="width: 100%;"  bgcolor ="b5d6e6" >
37              < tr  style ="background-color: White; height: 32px;" >
38                  < td  style ="width: 80px; padding-left: 5px" >
39                     Name:
40                  </ td >
41                  < td  style ="padding: 5px" >
42                      < input  name ="name"  type ="text" ></ input >
43                  </ td >
44              </ tr >
45              < tr  style ="background-color: White; height: 32px;" >
46                  < td  style ="width: 80px; padding-left: 5px" >
47                     Email:
48                  </ td >
49                  < td  style ="padding: 5px" >
50                      < input  name ="email"  type ="text" ></ input >
51                  </ td >
52              </ tr >
53              < tr  style ="background-color: White; height: 32px;" >
54                  < td  style ="width: 80px; padding-left: 5px" >
55                     Phone:
56                  </ td >
57                  < td  style ="padding: 5px" >
58                      < input  name ="phone"  type ="text" ></ input >
59                  </ td >
60              </ tr >
61              < tr  style ="background-color: White; height: 32px;" >
62                  < td  style ="width: 80px; padding-left: 5px" >
63                  </ td >
64                  < td  style ="padding: 5px" >
65                      < input  type ="button"  id ="button"  value ="提交" ></ input >
66                  </ td >
67              </ tr >
68          </ table >
69          < div  id ="common" >
70          </ div >
71      </ div >
72      </ form >
73  </ body >
74  </ 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);}
     });

你可能感兴趣的:(jQuery ajax)