• AJAX前后台交互


    注:ajax通过async参数决定是异步还是同步,false同步,true异步;

      异步执行顺序是先执行后续动作,再执行success里代码;

      同步是先执行success里代码,再执行后续代码;

    验证:同步时数据量大是否会卡顿?例如从后台搜索大量数据时,页面是否卡死?

    1、(异步)方法调用,后续代码不需要等待它的执行结果
      后台<C#>:

    using System.Web.Script.Services; 
     
    [WebMethod]
    public static string GetStr(string str1, string str2)
    {
        return str1 + str2;
    }
     
    前台<JQuery>:

    function Test(strMsg1,strMsg2)
    {
        $.ajax({
            type: "Post",
            url: "Demo.aspx/GetStr",
            async: true,
            //方法传参的写法一定要对,与后台一致,区分大小写,不能为数组等,str1为形参的名字,str2为第二个形参的名字
            data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                //返回的数据用data.d获取内容
                alert(data.d);
            },
            error: function(err) {
                alert(err);
            }
        });

      //隐藏加载动画
        $("#pageloading").hide();
    }

    2、(同步)方法调用,可用于需要得到返回值是执行后续代码的前提

      后台<C#>:

    using System.Web.Script.Services; 
     
    [WebMethod]
    public static string GetStr(string str1, string str2)
    {
        return str1 + str2;
    }
     
    前台<JQuery>:

    function Test(strMsg1,strMsg2)
    {

     var str = “”;
        $.ajax({
            type: "Post",
            url: "Demo.aspx/GetStr",
            async: false,
            //方法传参的写法一定要对,与后台一致,区分大小写,不能为数组等,str1为形参的名字,str2为第二个形参的名字
            data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                //返回的数据用data.d获取内容 
                str = data.d;
            },
            error: function(err) {
                alert(err);
            }
        });

     return str;

  • 相关阅读:
    好系统重装助手重装电脑系统步骤
    U盘加载速度慢的解决方法
    Win10应用商店缓存信息多如何去清理?
    怎么消除文件左上角的白色小框?
    U盘被识别但不显示盘符怎么样才能解决?
    【Gamma】Scrum Meeting 2
    【技术博客】 关于laravel5.1中文件上传测试的若干尝试
    【Beta】Phylab 发布说明
    【Beta】Phylab 测试报告
    【Beta】Scrum Meeting 10
  • 原文地址:https://www.cnblogs.com/qfcndtt/p/2935520.html
Copyright © 2020-2023  润新知