如何在ajax操作期间显示一个加载指示器或其他指示器？

Question

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

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

谢谢

- anon

---

你的问题标题与问题有什么关系？ - jball

我没有给它命名，肯定是其他人重命名的，因为在我的问题中我没有提到任何关于ajax的东西，我明确说了看一下使用“remote”而不是ajax的牛奶示例。 - anon

@Ash 我的评论是关于你最初的标题“Remember the Milk”，它并没有包含任何关于你具体问题的信息。我不确定 @bmargulies 的标题编辑是否适用于你的情况，但它肯定更加描述性。 - jball

实际上，我没有给它命名为“记住牛奶”之类的东西...所以你们其中一个人一定改了它——不要因为你们员工的愚蠢而责怪我... - anon

@Ash，请自行检查。 - jball

Answer 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
    });
}

请参见：

• http://api.jquery.com/toggle-event/
• http://api.jquery.com/jQuery.ajax/

编辑： remote 方法接受一个对象字面量，就像 ajax 请求一样。因此，请插入以下内容：

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

- Zirak

---

我不太确定你在我提出问题时引用的牛奶示例页面上找到了哪个ajax调用...它使用的是“remote”方法？ - anon

@Ash - remote 是 $.ajax() 的别名。AJAX 这个术语代表“异步 JavaScript 和 XML”。虽然在大多数情况下 XML 已经成为过时的协议，但几乎任何 JavaScript 对服务器的调用实际上都是 AJAX。这就是大家所说的 AJAX。 - Shauna

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

- Steve Costello

---

我做错了...抱歉，那是一个巨大的混乱。 :) - Steve Costello

我不太确定你在我提出问题时引用的牛奶示例页面上找到了哪个ajax调用... - anon

Answer 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" //或者您想要放置的任何位置
        left:"50%",
        marginLeft:$(".ajax_loader img").width()/2
    });
});
submitHandler: function() {
    alert("已提交！");
    var dataObj = "sdfsd" // 获取所有值并构建ajax数据对象
    $("#ajax_loader").show();
    $.ajax({
        url:"your_url",
        data: dataObj,
        success:function(val){
            $("#ajax_loader").hide();
};
    });
},

- locrizak

---

我不太确定你在我提出问题时引用的牛奶示例页面上找到了哪个ajax调用...它使用的是“remote”方法？ - anon