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

本文转载自查看原文 2013-04-20 21:42 10310 Jquery/ Ajax

使用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);}
     });

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jQuery ajax中使用serialize() 方法提交表单数据 JQuery Ajax() serialize()方法提交Form表单数据关于$.ajax()中使用serialize()提交form表单数据 jquery ajax异步提交表单数据的方法 jQuery ajax()使用serialize()提交form数据 jQuery ajax()使用serialize()提交form数据 jQuery序列化表单数据 serialize()、serializeArray()及使用 jquery的ajax获取form表单数据、提交表单form jQuery中使用$.ajax提交表单 jQuery ajax()使用serialize()提交form数据到后台