zoukankan      html  css  js  c++  java
  • net ajax 异步调用的几种实现方法(jquery)

    介绍几种.NET中ajax异步调用的不同实现方式

    (1).aspx 普通web窗体页。

    删除aspx页面中 html代码,只保留第一行。在后置代码页 .aspx.cs 中写对应的方法代码。

    前台调用:

        // 异步调用页面url,参数组,返回执行事件
    $.post("AjaxPage.aspx" , { type:'getData01' },function(re){
    $('#re_method01').html(re);
    });


    (2)单独.aspx 页(新建的时候不勾选 “将代码放在单独的文件中”) + 任意.cs文件(需要继承System.Web.UI.Page)

     .aspx文件中代码 <%@ Page Inherits="命名空间.类" %>

    (3).ashx页面

    这里主要知识点就是继承了IHttpHandler接口。来实现Http web相关的事件处理。
    实现方法:新建后注销掉context.Response.Write("Hello World");改为你的事件处理代码即可。


    1,2,3的前台ajax调用方法都一样。如果需要区分不同的ajax调用。我们可以传递一个不同值的 type 参数。后台再通过switch执行各自的处理程序。


    (4)利用System.Web.Services.WebMethodAttribute。

    在(1)的基础上引用命名空间using System.Web.Services;然后在需要异步执行的方法上添加[WebMethod]属性。

        [WebMethod]
    public static string HandleEvent01(string para,string para2)
    {
    //code...
    return "YOUR DATA";
    }



    前台调用代码:

        $.ajax({                    
    type: "POST",
    contentType: "application/json",
    url: "AjaxWebService.aspx/HandleEvent01", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
    data: "{'para':'bill','para2':'28'}", //这里是要传递的参数,注意参数名跟后台方法参数名的对应
    dataType: 'json', //WebService 返回Json类型 或者 Json/string
    success: function(re) {
    $('#re_method04').html(re.d);
    }
    });


    可返回json或者string.返回的数据格式为 {"d":你的数据}。这也是为什么我们前台取值的时候会是re.d。

    通常我们返回的数据类型可以为,普通字符串,自定义对象,泛型列表,我们看看返回不同类型数据时前端json数据的格式。

    后台代码:

        [WebMethod]
    public static string HandleEvent01()
    {
    //code...
    return "some words";
    }

    [WebMethod]
    public static Person AjaxMethodThree(string para)
    {
    return new Person { Name = "bill", Country = "China", Favor = new string[] { "Box", "Music", "Football" } };
    }

    [WebMethod]
    public static List<Person> AjaxMethodTwo(string para)
    {
    List<Person> personlist = new List<Person>();
    personlist.Add(new Person { Name = "bill", Country = "China", Favor = new string[] { "Box1", "Film1", "Football1" } });
    personlist.Add(new Person { Name = "tom", Country = "USA", Favor = new string[] { "Box2", "Music2", "Football2" } });
    personlist.Add(new Person { Name = "lucy", Country = "Korea", Favor = new string[] { "Box3", "Music3", "Football3" } });
    return personlist;
    }

    //定义一个Person对象
    public class Person
    {
    public string Name { get; set; }
    public string Country { get; set; }
    public string[] Favor { get; set; }
    }


    1.返回字符串
    json:{"d":"字符串"}
    2.返回类型为自定义对象, 前端返回值为一个对应的JSON对象
    json:{"d":{"name1":"value1","name2":"value2"...}}

    3,返回类型为泛型列表, 前端返回值为对应的JSON对象数组。


    如果我们异步就是需要返回json格式数据,这样就很方便。同时,除了以WebService的方式被调用,这个页面也可以以普通URL的方式来异步访问,也就是(1)的情况。


    (5)调用WebService

    添加web 服务。会生成一个WebServicexxx.asmx以及WebServicexxx.cs.异步程序在WebServicexxx.cs中实现,基本跟(4)差不多。

    (6)MVC中的ajax异步实现

    1.直接在控制器中写public string Ajax(){return "re";}方法,不用额外建视图文件。
    2.或者你要返回的内容结构还比较复杂,新建一个_Ajax.cshtml分部视图。控制器中代码:

            public ActionResult Ajax()
    {
        //...your code...
    return PartialView("_Ajax");
    }


    前台调用代码:

        $.post("/控制器名/ajax" , { type:'getData01' },function(re){
    $('#re_method01').html(re);
    });



    上面的代码整理到了一个项目里  代码下载

    jQuery的ajax使用场景讨论(c#)

     

    一:jQuery.ajax语法基础

    jQuery.ajax([options])
    概述:通过 HTTP 请求加载远程数据。

    jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。 
    数据类型 
    $.ajax()函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中,text和xml类型返回的数据不会经过处理。如果指定为html类型,任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。发送数据到服务器,默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。 
    使用场景一:
    描述:保存数据到服务器,成功时显示信息。jQuery 代码:
    $.ajax({
       type: "POST",
       url: "some.php",
       data: "name=John&location=Boston",
       success: function(msg){
         alert( "Data Saved: " + msg );
       }
    });
    使用场景二:
    描述:装入一个 HTML 网页最新版本。jQuery 代码:
    $.ajax({
      url: "test.html",
      cache: false,
      success: function(html){
        $("#results").append(html);
      }
    });

    load(url, [data], [callback])
    概述:载入远程 HTML 文件代码并插入至 DOM 中。
    默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
    使用场景一:
    描述:加载 feeds.html 文件内容。jQuery 代码:
    $("#feeds").load("feeds.html");

    jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

    概述:通过远程 HTTP GET或POST  请求载入信息。
    这是一个简单的 GET或POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
    描述:显示 test.aspx 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。jQuery 代码:
    $.get("test.aspx", { name: "John", time: "2pm" },
      function(data){
        alert("Data Loaded: " + data);
    });
    $.post("test.aspx", { name: "John", time: "2pm" },
      function(data){
        alert("Data Loaded: " + data);
    });

    上面是基本的语法,我们只是先做一个了解,要是你已经熟悉,那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。

    二:jQuery.ajax伴随ASP.NET的实战练习

    首先创建Default.aspx页面,作为请求发起页面,并会获得返回值。页面的代码Default.aspx是:

    View Code

    Default.aspx.cs里面有没写任何代码,默认即可。
    请求的接受者这里面有三种角色:response.aspx页面、test.htm静态页面和TextJson.txt。

    response.aspx页面:主要是在服务器端获得客户端提交的数据,并返回数据给客户端。
    test.htm静态页面:主要是给客户端局部装入一个HTML网页最新版本。
    TextJson.txt:是作为数据储存在文件中,让客户端来异步访问的。

    response.aspx页面代码,response.aspx是:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

    没有任何html代码,因为主要是在服务器端获得客户端提交的数据,并返回数据给客户端,不需要显示html内容,所以可以不含html标记。
    response.aspx.cs页面代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Runtime.Serialization.Json;
    using System.Runtime.Serialization;

    namespace JqueryAjax2
    {
        public partial class response : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                string str = Request["key1"];
                Response.Write("success" + str);
            }
        }
    }

    在代码中可以看到服务器端获得客户端提交的数据,并返回数据给客户端的方式。

    test.htm静态页面的代码是:

    <!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>
        <title></title>
    </head>
    <body>
    test.html
    </body>
    </html>

    当静态页面被请求后,会作为html的格式返回客户端,使用 $("#resulthtml").append(html);这样的方法来显示test.htm静态页面的内容。

    TextJson.txt里面保存着一段文本,是json格式的:

    {   "key1": "刘明丰",   "key2": "林望",   "key3": "陈文杰",   "key4": "耿殿佳" }

    在被访问后返回的是json格式的数据,在客户端获得json后会自动转换成对象。

    好了,jQuery的异步使用场景基本满足我们的需求,自己试试看吧。

  • 相关阅读:
    Maven 安装 / 常用配置 / 阿里maven中央仓库
    记录:框架
    Mysql配置文件详解 my.cof
    Vmware虚拟机设置静态IP地址
    虚拟机安装centos发现inet为127.0.0.1,导致Xshell连接不上
    Servlet小案例总结
    Win10 提升系统响应速度
    从顶端插入,滚动展示(Demo):
    eclipse +cygwin+C++
    大型网站技术学习-3. 容器Docker与kubernetes
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2408485.html
Copyright © 2011-2022 走看看