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;

处理的结果如下所示：

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

ASP.NET JQuery Ajax 详解的更多相关文章

jquery ajax详解
详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...
Jquery ajax 详解（Day_16）
太在意别人的看法最后会有两种结局,要么自己累死,要么让别人整死. 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 简短地说,在不重载整个网页的情况下,A ...
$.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
[一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...
jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现一.插件结构(组织方式) 在讲 ...
jQuery.validator 详解
jQuery.validator 详解二前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
Ajax详解及使用Ajax时的返回值类型有哪些？
Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...
jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
ASP.NET 操作Cookie详解增加，修改，删除
ASP.NET 操作Cookie详解增加,修改,删除 Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109.它 ...
ASP.NET 运行时详解揭开请求过程神秘面纱
对于ASP.NET开发,排在前五的话题离不开请求生命周期.像什么Cache.身份认证.Role管理.Routing映射,微软到底在请求过程中干了哪些隐秘的事,现在是时候揭晓了.抛开乌云见晴天,接下来就 ...

随机推荐

C++ Primer 读书笔记第2章变量和基本类型
C++ Primer 第二章变量和基本类型 2.1 基本内置类型 C++定义了一组表示整数.浮点数.单个字符和布尔值的算术类型(arithmetic type),此外还定义了Void类型. 算术类型 ...
XLSReadWrite控件简介
2015-10-22 23:57:55 原帖地址:http://www.cnblogs.com/dabiao/archive/2011/07/08/2100609.html XLSReadWrite ...
xhprof
#官网下载 http://pecl.php.net/package/xhprof tar zxf xhprof-0.9.2.tgz cd xhprof-0.9.2/extension/ sud ...
VC++学习之网络编程中的套接字
VC++学习之网络编程中的套接字套接字,简单的说就是通信双方的一种约定,用套接字中的相关函数来完成通信过程.应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问 ...
linux杂记（六）档案权限
[KANO@kelvin ~]$ ls -al 总用量 drwx------. KANO KANO 10月 : . drwxr-xr-x. root root 9月 : .. drwxrwxr-x. ...
Unity3D移植到自己的Android程序
用Unity3D开发需要把动画效果移植到现有的APP上面.Unity for Android 比较特殊,Unity for IOS 打包是将XCODE工程直接交给开发者,开发者可以在工程的基础上继续添 ...
转载[WampServer下使用多端口访问]
作者:韩子迟原文链接:http://www.cnblogs.com/zichi/p/4589142.html 注意点:www和www2都需要安装服务: 在C:\wamp\bin\apache\Apa ...
poj 1949 Chores 最长路
题目链接求出最长路..... #include <iostream> #include <vector> #include <cstdio> #include & ...
随机数、continue、break
arc4random() — 返回一个随机数(无符号整型). 如果要随机一个 [a, b]范围内的整数公式:arc4random() % (b - a + 1) + a; #include &l ...
ICT测试原理
在线测试,ICT,In-Circuit Test,是通过对在线元器件的电性能及电气连接进行测试来检查生产制造缺陷及元器件不良的一种标准测试手段.它主要检查在线的单个元器件以及各电路网络的开.短路情况, ...

ASP.NET JQuery Ajax 详解

ASP.NET JQuery Ajax 详解的更多相关文章

随机推荐

热门专题