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; width: 800px; height: 300px; text-align: center;" align="center">
        <table cellpadding="10" cellspacing="1" border="0" class="tab" style="width: 800px;">
            <tr>
                <td style="text-align: right; width: 50%;">
                    <asp:TextBox ID="txtInputBoolValue" runat="server" class="text"></asp:TextBox>
                </td>
                <td style="text-align: left; width: 50%;">
                    <asp:Button ID="btnAjaxJsonPost" runat="server" Text="Ajax请求的数据结果是Bool" class="button   orange" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right; width: 50%;">
                    <asp:TextBox ID="txtInputStringValue" runat="server" class="text"></asp:TextBox>
                </td>
                <td style="text-align: left; width: 50%;">
                    <asp:Button ID="btnAjaxStringPost" runat="server" Text="Ajax请求的数据结果是String" class="button   orange" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right; width: 50%;">
                    <asp:TextBox ID="txtInputTableValue" runat="server" class="text"></asp:TextBox>
                </td>
                <td style="text-align: left; width: 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;
 
        }
    }
}

处理的结果如下所示:

ASP.NET JQuery Ajax 详解

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

上一篇:【COM学习】之二、HRESULT,GUID


下一篇:ORM框架-VB/C#.Net实体代码生成工具(EntitysCodeGenerate)【ECG】4.5