• ASP.NET JQuery Ajax 详解


    在.NET中使用Ajax请求,我们可以使用一般处理程序,或者Web服务,还有一种是使用后台的Web方法(注意:当我们使用后台的Web方法是,后台方法必须加可访问性必须为: public,且为static,并且要在方法要加上 [WebMethod],需要引用using System.Web.Services;命名空间,还有一个地方需要注意的是方法中的参数名一定要与Ajax请求时的参数名保持一致,其中请求Web服务需要注意的地方这这里的一样。)

    我这里只讲Web服务的使用

    首先是前台的代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Base.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
        <style type="text/css">
            .content
            {
                font-size: large;
                font-style: italic;
                font-weight: bold;
                border: solid 1px #888;
                margin-top: 4px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btnAjaxJsonPost").click(function (e) {
                    e.preventDefault();
                    // 首先判断用户名是否为空,并给出提示
                    if ($("#txtInputBoolValue").val() == "") {
                        alert("请输入内容!");
                    }
                    else {
                        sendJsonData1($("#txtInputBoolValue").val());
                    }
                });
                $("#btnAjaxStringPost").click(function (e) {
                    e.preventDefault();
                    // 首先判断用户名是否为空,并给出提示
                    if ($("#txtInputStringValue").val() == "") {
                        alert("请输入内容!");
                    }
                    else {
                        sendJsonData2($("#txtInputStringValue").val());
                    }
                });
     
                $("#btnAjaxTablePost").click(function (e) {
                    e.preventDefault();
                    // 首先判断用户名是否为空,并给出提示
                    if ($("#txtInputTableValue").val() == "") {
                        alert("请输入内容!");
                    }
                    else {
                        sendJsonData3($("#txtInputTableValue").val());
                    }
                });
     
            });
     
            // 定义一个AJAX请求方法
            function sendJsonData1(para) {
                // 访问Web服务
                var loc = "service/WSAjaxPost.asmx";
                $.ajax({
                    type: "POST",
                    url: loc + "/ReuturnJson",
                    // sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
                    // json数据格式是由一对键值构成,如{"name1":"value1", "name2":"value2"}
                    data: '{ "para": "' + para + '"}',
                    // 发送信息至服务器时内容编码类型
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        //alert(msg.d);
                        $("#content1").text(msg.d);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert("AJAX错误:" + errorThrown);
                    }
                });
            }
     
            function sendJsonData2(para) {
     
                // 访问Web服务
                var loc = "service/WSAjaxPost.asmx";
                $.ajax({
                    type: "POST",
                    url: loc + "/ReuturnString",
                    // sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
                    // json数据格式是由一对键值构成,如{"name1":"value1", "name2":"value2"}
                    data: '{ "para": "' + para + '"}',
                    // 发送信息至服务器时内容编码类型
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        //alert(msg.d);
                        $("#content2").text(msg.d);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert("AJAX错误:" + errorThrown);
                    }
                });
     
            }
     
     
            function sendJsonData3(para) {
                var html = "";
                // 访问Web服务
                var loc = "service/WSAjaxPost.asmx";
                $.ajax({
                    type: "POST",
                    url: loc + "/ReuturnDataTable",
                    // sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
                    // json数据格式是由一对键值构成,如{"name1":"value1", "name2":"value2"}
                    data: '{ "para": "' + para + '"}',
                    // 发送信息至服务器时内容编码类型
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        //alert(msg.d);
     
                        var dtJson = eval(msg.d);
     
                        $.each(dtJson, function (i) {
                            html += "<li><a>" + dtJson[i].Title + "</a>";
                        });
                        $("#content3").text("");
                        $("#content3").append(html);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                            alert("AJAX错误:" + errorThrown);
                    }
                });
     
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="margin: 0 auto;  800px; height: 300px; text-align: center;" align="center">
            <table cellpadding="10" cellspacing="1" border="0" class="tab" style=" 800px;">
                <tr>
                    <td style="text-align: right;  50%;">
                        <asp:TextBox ID="txtInputBoolValue" runat="server" class="text"></asp:TextBox>
                    </td>
                    <td style="text-align: left;  50%;">
                        <asp:Button ID="btnAjaxJsonPost" runat="server" Text="Ajax请求的数据结果是Bool" class="button   orange" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;  50%;">
                        <asp:TextBox ID="txtInputStringValue" runat="server" class="text"></asp:TextBox>
                    </td>
                    <td style="text-align: left;  50%;">
                        <asp:Button ID="btnAjaxStringPost" runat="server" Text="Ajax请求的数据结果是String" class="button   orange" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;  50%;">
                        <asp:TextBox ID="txtInputTableValue" runat="server" class="text"></asp:TextBox>
                    </td>
                    <td style="text-align: left;  50%;">
                        <asp:Button ID="btnAjaxTablePost" runat="server" Text="Ajax请求的数据结果是BoolDataTable"
                            class="button   orange" />
                    </td>
                </tr>
            </table>
            <div class="content" id="content1">
            </div>
            <div class="content" id="content2">
            </div>
            <div class="content" id="content3">
            </div>
        </div>
        </form>
    </body>
    </html>

    这里是Web服务中的代码

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
     
    namespace Web.service
    {
        /// <summary>
        /// WSAjaxPost 的摘要说明
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
        [System.Web.Script.Services.ScriptService]
        public class WSAjaxPost : System.Web.Services.WebService
        {
     
            
            [WebMethod]
            public bool ReuturnJson(string para)
            {
                string[] userNameArrray = new string[5] { "A", "B", "C", "D", "E" };
                // 如果用户存在,就验证合法
                if (userNameArrray.Contains(para))
                {
                    return true;
                }
     
                return false;
            }
     
             [WebMethod]
            public string ReuturnString(string para)
            {
                string name = "";
                switch (para)
                {
                    case "a":
                        name = "A";
                        break;
                    case"b":
                        name = "B";
                        break;
                    case "c":
                        name = "C";
                        break;
                    case "d":
                        name = "D";
                        break;
                }
                return name;
            }
             [WebMethod]
             public string  ReuturnDataTable(string para)
             {
                 DataTable dt = null;
                 switch (para)
                 {
                     case "1":
                         dt = CreateTable();
                         break;
                     case "2":
                         dt = GetTable();
                         break;
     
                 }
                 
     
                 return Common.JsonHelper.ToJson(dt);
             }
     
     
            private DataTable CreateTable()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("BookId", typeof(string));
                dt.Columns.Add("Title", typeof(string));
                dt.Columns.Add("Author", typeof(string));
                dt.Columns.Add("Publish", typeof(string));
     
                dt.Rows.Add("1", "持续交付:发布可靠软件的系统方法", "(英) 亨布尔 (Humble,J.),(英) 法利 (Farley,D.) 著 乔梁 译 ", "人民邮电出版社");
                dt.Rows.Add("2", "人件集:人性化的软件开发", "(澳) Larry L. Constantine 著 谢超 等 译 ", "机械工业出版社");
                dt.Rows.Add("3", "一线架构师实践指南", "温昱 著 ", "电子工业出版社");
                dt.Rows.Add("4", "设计模式:可复用面向对象软件的基础", "Erich Gamma 等 著 ", "机械工业出版社");
                dt.Rows.Add("5", "重构:改善既有代码的设计", "(美)福勒 著 熊节 译 ", "人民邮电出版社");
                return dt;
     
            }
            private DataTable GetTable()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("BookId", typeof(string));
                dt.Columns.Add("Title", typeof(string));
                dt.Columns.Add("Author", typeof(string));
                dt.Columns.Add("Publish", typeof(string));
     
                dt.Rows.Add("1", "持续交付:发布可靠软件的系统方法", "(英) 亨布尔 (Humble,J.)", "人民邮电出版社");
                dt.Rows.Add("2", "人件集:人性化的软件开发", "(澳) Larry L. Constantine   ", "机械工业出版社");
                dt.Rows.Add("3", "一线架构师实践指南", "温昱 著 ", "电子工业出版社");
                dt.Rows.Add("4", "设计模式:可复用面向对象软件的基础", "Erich Gamma 等 著 ", "机械工业出版社");
                dt.Rows.Add("5", "重构:改善既有代码的设计", "(美)福勒 著  ", "人民邮电出版社");
                return dt;
     
            }
        }
    }

    处理的结果如下所示:

    image

    这里我使用的数据类型都是JSON格式,其他方式这里都没有讲解。

  • 相关阅读:
    Mybatis 系列9-强大的动态sql 语句
    Mybatis 系列8-结合源码解析select、resultMap的用法
    Mybatis 系列7-结合源码解析核心CRUD 配置及用法
    Mybatis 系列6-结合源码解析节点配置:objectFactory、databaseIdProvider、plugins、mappers
    Mybatis 系列5-结合源码解析TypeHandler
    Mybatis 系列4-结合源码解析节点:typeAliases
    Mybatis 系列3-结合源码解析properties节点和environments节点
    Mybatis 系列2-配置文件
    Mybatis 系列1-环境搭建
    自动生成MyEclipse 安装破解码
  • 原文地址:https://www.cnblogs.com/jlcoder/p/3473074.html
Copyright © 2020-2023  润新知