在.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 详解的更多相关文章

  1. jquery ajax详解

    详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...

  2. Jquery ajax 详解(Day_16)

    太在意别人的看法最后会有两种结局,要么自己累死,要么让别人整死. 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 简短地说,在不重载整个网页的情况下,A ...

  3. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  4. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  5. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  6. Ajax详解及使用Ajax时的返回值类型有哪些?

    Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...

  7. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  8. ASP.NET 操作Cookie详解 增加,修改,删除

    ASP.NET 操作Cookie详解 增加,修改,删除 Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109.它 ...

  9. ASP.NET 运行时详解 揭开请求过程神秘面纱

    对于ASP.NET开发,排在前五的话题离不开请求生命周期.像什么Cache.身份认证.Role管理.Routing映射,微软到底在请求过程中干了哪些隐秘的事,现在是时候揭晓了.抛开乌云见晴天,接下来就 ...

随机推荐

  1. 2014.9.16HTML表单CSS

    (一)表格 合并单元格(少用) (合并列) 1.先选中要合并的2个或多个单元格,然后点击以下图标 代码:<td colspan="2"> </td> 2.设 ...

  2. (转)MapReduce 中的两表 join 几种方案简介

    1. 概述 在传统数据库(如:MYSQL)中,JOIN操作是非常常见且非常耗时的.而在HADOOP中进行JOIN操作,同样常见且耗时,由于Hadoop的独特设计思想,当进行JOIN操作时,有一些特殊的 ...

  3. CKEditor + CKFinder 实现编辑上传图片配置 (二)

    CKEditor + CKFinder 实现编辑上传图片配置 (二) 上传图片时,如果上传的图片过大,默认情况情况下回自动裁剪,代码如图 \ckfinder\config.php 目录下的配置文件co ...

  4. realloc,c语言

    realloc #include <stdlib.h> main() { char* ptr=NULL; char* ptr2=NULL; ptr = malloc(); printf(& ...

  5. Linux学习之开机启动

    当我们打开计算机电源,计算机会自动从主板的BIOS(Basic Input/Output System)读取其中所存储的程序.这一程序通常知道一些直接连接在主板上的硬件(硬盘,网络接口,键盘,串口,并 ...

  6. 使用Docker官方的Django包【转】

    官方Django docker,并没有安装Django 所以需要 在requirements.txt中配置Django 具体安装流程可以参考:http://www.logme.cn/blog/51/u ...

  7. jQuery实时获取checkbox状态问题

    在最近的项目开发中,使用jQuery操作checkbox时,发现一个问题. Html代码如下: <body> <div> <inputtype="checkbo ...

  8. Gulp browserify livereload

    Gulp browserify livereload 之前在browserify那个博文中介绍了gulp + browserify 不过那个配置还不能满足日常需要 搬运 https://github. ...

  9. Delphi2010新发现-类的构造和析构函数功能

    Delphi2010发布了. 虽然凭着对Delphi的热爱第一时间就安装了,但是现在可能是年纪大了,对新事物缺乏兴趣了.一直都没有仔细研究. 今天有点时间试了一下新功能. 本来C#和Delphi.NE ...

  10. DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout的使用--AndroidSupportDesign练手

    先po一张效果图 PS:原谅题主的懒惰吧.. 看着是不是很酷炫,那是因为5.0的动画做得好,代码其实没有多少,搞清楚这个布局的层次关系很重要. 废话不多说了,先来看布局文件 最外层是一个DrawerL ...