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

Question

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

如果可能的话，您能否查看牛奶示例并告诉我它如何适合进入该代码。只需单击“显示此页面上使用的脚本”即可查看源代码。

谢谢

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

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

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

        };
    });
},