zoukankan      html  css  js  c++  java
  • Ajax异步调用的几种方法

    一、介绍.net中异步调用的不同实现方式
    首先新建一个html页面
     <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
                //向webform请求
                $.post("AjaxPage.aspx", { type: 'getData01' }, function (re) {
                    $('#re_method01').html(re);
                });
        });
    </script>
    (1)、第一种普通的webform窗体页
                新建一个webform把aspx页面的HTML代码去掉,留住第一行
                <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs"         Inherits="WebApplication1.AjaxPage" %>
                后台cs文件代码:
                 protected void Page_Load(object sender, EventArgs e)
                {
                     string type = HttpContext.Current.Request.Form["type"];
                if(type=="getData01")
                {
                         HttpContext.Current.Response.Write("AjaxPage.aspx/Ajax Frame No.1");
                }   
                }
    (2)、第二种单独的aspx页面和一个cs文件
    aspx文件中的代码<%@ Page Inherits="命名空间.刚才的那个cs文件名" %>
    前台:
    $.post('Ajax.aspx', { type: 'getData01' }, function (re) {
                    $('#re_method02').html(re);
                });
    后台:
    public Ajax()
        {
            string type = HttpContext.Current.Request.Form["type"];
             if(type=="getData01")
                {
                         HttpContext.Current.Response.Write("Ajax.aspx/Ajax Frame No.1");
                }
        }
    (3)、第三种是ashx一般处理程序的文件
    这里主要知识点就是继承了IHttpHandler接口。来实现Http web相关的事件处理。
    实现方法:新建后注销掉context.Response.Write("Hello World");改为你的事件处理代码即可。
    (4)、第四种利用System.Web.Services.WebMethodAttribute
    在(1)的基础上引用命名空间using System.Web.Services;然后在需要异步执行的方法上添加[WebMethod]属性
    前台:
    $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json",
                    url: "AjaxWebService.aspx/HandlerEvent01", //调用WebService的地址和方法名称组合 ---- WsURL/方法名                    
                    data: "{'para':'bill','para2':'28'}",  //这里是要传递的参数,格式为 data: "{paraName:paraValue}" 需要注意参数名跟后台方法参数名对应                   
                    dataType: 'json',   //WebService 返回Json类型 或者 Json/string                   
                    success: function (re) {
                        $('#re_method04').html(re.d);
                    }
                });
    后台:
    [WebMethod]
            public static string HandlerEvent01(string para, string para2)
            {
                return "AjaxWebService.aspx/Ajax Frame No.4";
            }

    可返回json或者string.返回的数据格式为 {"d":你的数据}。这也是为什么我们前台取值的时候会是re.d。通常我们返回的数据类型可以为,普通字符串,自定义对象,泛型列表,我们看看返回不同类型数据时前端json数据的格式

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

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

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

    (5)调用webservice

    (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);

        });

         Demo源码:下载


  • 相关阅读:
    bzoj 1853: [Scoi2010]幸运数字 容斥
    bzoj 3545&&3551: [ONTAK2010]Peaks &&加强版 平衡树&&并查集合并树&&主席树
    bzoj 2331: [SCOI2011]地板 插头DP
    bzoj 3669: [Noi2014]魔法森林 动态树
    bzoj 2734: [HNOI2012]集合选数 状压DP
    bzoj 3751: [NOIP2014]解方程 同余系枚举
    bzoj 2594: [Wc2006]水管局长数据加强版 动态树
    bzoj 2049: [Sdoi2008]Cave 洞穴勘测 动态树
    bzoj 2209: [Jsoi2011]括号序列 splay
    bzoj 1223: [HNOI2002]Kathy函数 数位DP 高精度
  • 原文地址:https://www.cnblogs.com/hailiang2013/p/2846418.html
Copyright © 2011-2022 走看看