如何在ajax操作過程中顯示跳動或其他指示？

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

參見：

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

編輯：remote方法接受一個objec t就像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

我把這個從你的頁面eated。爲了簡單起見，我把它全部作爲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(); 

     }; 
    }); 
},