zoukankan      html  css  js  c++  java
  • 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=" 100%;" bgcolor="b5d6e6">
                <tr style="background-color: White; height: 32px;">
                    <td style=" 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=" 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=" 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=" 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=" 100%;" bgcolor="b5d6e6">
    37             <tr style="background-color: White; height: 32px;">
    38                 <td style=" 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=" 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=" 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=" 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);}
         });
    作者:【逸然微笑】
    出处:http://www.cnblogs.com/weixiao520/
    主要研究技术:专注于C#领域,Winform开发、Web开发。
  • 相关阅读:
    时寒冰先生文章转载
    [转]迭代经理是什么角色
    [转]如何抉择重构?
    面面俱到:SQL SERVER 2008主数据管理
    [转]用户故事【任务分解】和软件开发不得不说的故事
    读书心得3:去功利化&推荐两本书 转时寒冰
    沟通模式中的方式与过程
    系统分析与设计笔记 -系统类型
    加入敏捷团队宣言
    [转]敏捷进展学习 新项目Sprint
  • 原文地址:https://www.cnblogs.com/weixiao520/p/3033190.html
Copyright © 2011-2022 走看看