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

我想知道如何顯示一個ajax loader gif而「遠程」功能忙於後端程序。如何在ajax操作過程中顯示跳動或其他指示？

如果可能的話，你可以看看milk example並告訴我它是如何適合該代碼的。只需點擊「顯示此頁面上使用的腳本」即可查看源代碼。

謝謝

2011-04-20 Ash

問題標題與您的問題有什麼關係？ – jball 2011-04-20 19:57:53

我沒有說它的名字，別人肯定已經改名了，因爲我的問題中沒有提到有關Ajax的任何內容，我特別說過使用「remote」而不是ajax的牛奶示例。 – Ash 2011-04-20 23:36:05

@Ash我的意見是關於你的原標題_Remember the Milk_，它不包含任何關於你的具體問題的信息。我不確定@bmargulies的標題編輯是否適合您的情況，但它肯定更具描述性。 – jball 2011-04-20 23:58:16

假設你已經知道如何使用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方法接受一個objec t就像ajax請求那樣。因此，在堵塞此：

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

來源

2011-04-20 20:06:37 Zirak

我不太確定你在哪裏找到了我在問題中引用的牛奶示例頁面上的ajax調用...它使用「遠程」方法？ – Ash 2011-04-20 23:33:30

已編輯。（（eoc）） – Zirak 2011-04-21 16:18:32

@Ash - 'remote'是'$ .ajax（）'的別名。術語AJAX的意思是「異步JavaScript和XML」。儘管XML在大多數情況下已經變成了一個陳舊的協議，但幾乎所有Javascript對服務器的調用實際上都是AJAX。這就是每個人都能獲得的地方。 – Shauna 2012-11-02 21:02:15

爲了您的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(); }

來源

2011-04-20 20:07:11

請重新格式化。 – Davy8 2011-04-20 20:08:05

我確實......對不起，這是一個巨大的混亂。:) – 2011-04-20 20:11:24

我不太確定你在哪裏找到了我在我的問題中引用的牛奶示例頁面上的ajax調用... – Ash 2011-04-20 23:31:47

我把這個從你的頁面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(); 

     }; 
    }); 
},

來源

2011-04-20 20:12:46 locrizak

我不太確定你在哪裏找到了我參考的牛奶示例頁面上的ajax調用在我的問題......它使用「遠程」方法？ – Ash 2011-04-20 23:33:12

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

回答

相關問題