如何在 ajax 操作期间显示 throbber 或其他指示器？答案

【问题标题】：How to show a throbber or other indicator during an ajax operation?如何在 ajax 操作期间显示 throbber 或其他指示器？
【发布时间】：2011-04-20 19:55:39
【问题描述】：

我想知道如何在“远程”功能忙于后端程序时显示ajax loader gif。

如果可能，请您查看milk example 并告诉我它如何适合该代码。只需点击“显示此页面上使用的脚本”即可查看源代码。

谢谢

【问题讨论】：

你的问题标题和你的问题有什么关系？
我没有这样命名，肯定是其他人重命名了它，因为在我的问题中我没有提到任何关于 ajax 的内容，我特别说看看使用“远程”的牛奶示例不是ajax。
@Ash 我的评论是关于您的原始标题Remember the Milk，其中不包含有关您的具体问题的任何信息。我不确定@bmargulies 的标题编辑是否适合您的情况，但它肯定更具描述性。
实际上，我并没有用记住牛奶来命名它......所以你们中的一个人一定已经改变了它 - 不要因为你的员工愚蠢而责备我......
@Ash, check it yourself.

标签： jquery ajax validation loader

【解决方案1】：

假设您已经知道如何使用 AJAX。基本过程是在操作开始时显示图像，并在最后从服务器返回结果时将其隐藏。

<!--html-->
<img id='ajaxLoader' src='mahAjaxLoader.gif' />
<!--has display:none via CSS-->

//js
function doAjaxStuff() {
    $('#ajaxLoader').toggle(); //toggle visibility; it's now shown

    //other stuff

    $.ajax({
        //normal AJAX stuff
        onComplete : function() {
            $('#ajaxLoader').toggle(); //it's hidden again
            //other oncomplete stuff
    });
}

见：

编辑：remote 方法像 ajax 请求一样接受对象字面量。所以插入这个：

remote : {
    beforeSend : function() {
        $('#ajaxLoader').toggle();
    }
    onComplete : function() {
        $('#ajaxLoader').toggle();
    }
}

【讨论】：

我不太确定您在我的问题中引用的牛奶示例页面上的哪里找到了 ajax 调用...它使用的是“远程”方法？
@Ash - remote 是 $.ajax() 的别名。 AJAX 一词的意思是“异步 Javascript 和 XML”。虽然在大多数情况下 XML 已成为一种古老的协议，但几乎任何 Javascript 对服务器的调用实际上都是 AJAX。这就是每个人都得到它的地方。

【解决方案2】：

对于您的 AJAX 调用：

var GetWSDataJSON = function (ServiceUrl, Parameters, onSuccess, onFailure, onComplete){
    $.ajax({
        type: "POST",
        data: "{" + Parameters + "}",
        url: basePath + ServiceUrl,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            var msg = result.d;
            onSuccess(msg);
        },
        error: function (request, status, throwerror) {
            onFailure();
        },
        complete: function () {
            if (onComplete != undefined) {
            onComplete();
        }
     }
  });
}

然后，在您的实际 AJAX 请求中：

function SomeFunctionHere() {
    $('#containerDiv').showLoading();
    GetWSDataJSON('WebServices/Service.asmx/GetYourData', 'someData: "' + someVar + '"', SomeFunction_Success, SomeFunction_Failure, SomeFunctionComplete);
}

最后，AJAX 调用后的函数：

var SomeFunction_Success = function(msg){ //do something with the msg }
var SomeFunction_Failure = function(){ //do something with the error }
var SomeFunction_Complete = function(){ $('#containerDiv').hideLoading(); }

【讨论】：

我做了...对不起，那是一团糟。 :)
我不太确定您在我的问题中引用的牛奶示例页面上的哪里找到了 ajax 调用...

【解决方案3】：

我是从您创建的页面中获取的。为简单起见，我将其全部设为 js，但您可以使用 html 创建元素并在样式表中应用样式。

$(document).ready(function(){
    $("#signupwrap").prepend("<div id='ajax_loader'><img src='path_to_image' /></div>");
    $("#ajax_loader").css({
        width: $("#signupwrap").width(),
        height: $("#signupwrap").height()
    }).hide();

    $("#ajax_loader img").css({
        position: "absolute",
        top:"300px" //or wherever you want to put it
        left:"50%",
        marginLeft:$(".ajax_loader img").width()/2
    });
});


submitHandler: function() {
    alert("submitted!");
    var dataObj = "sdfsd" // get all the values and build the ajax data object
    $("#ajax_loader").show();
    $.ajax({
        url:"your_url",
        data: dataObj,
        success:function(val){
            $("#ajax_loader").hide();

        };
    });
},

【讨论】：

我不太确定您在我的问题中引用的牛奶示例页面上的哪里找到了 ajax 调用...它使用的是“远程”方法？