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源码:下载


  • 相关阅读:
    软件测试的14种类型
    解决:Failure to transfer org.apache.maven.plugins:maven-jar-plugin:pom:2.4 from错误
    Docker 自建私有Registry 私有仓库
    VMware vCenter Server 6 Standard
    获取Zabbix 中资源的使用率
    数据库锁表备份及主从复制
    12-kubernetes Dashboard 认证及分级授权
    11-kubernetes RBAC 及授权
    10-kubernetes serveraccount RBAC
    09-kubernetes StatefulSet
  • 原文地址:https://www.cnblogs.com/hailiang2013/p/2846418.html
Copyright © 2011-2022 走看看