Question

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

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

由于

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

请参阅：

编辑：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();

        };
    });
},

如何在ajax操作期间显示悸动者或其他指标？

3 个答案: