2009-11-30 42 views
66

我遇到了一些我們所做的jQuery控件的問題。假設你有一個下拉列表,允許你輸入你正在查找的項目的ID,當你按下ENTER或在文本框中失去焦點時,它會通過jQuery驗證你輸入的ID是否正確,如果它沒有顯示警報「T。如何知道jQuery是否有待處理的Ajax請求?

問題是,當一個普通用戶在其中輸入一個無效值,並通過按提交按鈕失去焦點時,在發送表單提交後,jQuery post會返回。

有沒有什麼方法可以檢查是否有任何異步請求由jQuery處理,以便我不允許表單提交?

回答

31

您可以使用ajaxStartajaxStop來跟蹤請求處於活動狀態。

+0

這對我更好,因爲我的控件使用HtmlHelper多次渲染。謝謝! – sabanito 2009-11-30 23:43:35

10

$ .ajax()函數返回一個XMLHttpRequest對象。將其存儲在可從提交按鈕的「OnClick」事件訪問的變量中。當一個提交的點擊處理檢查以查看是否XMLHttpRequest的變量是:

1)空的,這意味着沒有請求已被尚未

2發送),該readyState值爲4(加載)。這意味着該請求已成功發送並返回。

在這兩種情況下,返回true並允許提交繼續。否則,返回false以阻止提交,併爲用戶提供某些爲什麼提交不起作用的指示。 :)

+3

檢查空,以確定是否存在請求對象是很重要的,但如果它不爲空,你應該確實檢查'request.readyState> 0 && request.readyState <4'以確定'活動'請求,因爲readyState 0表示儘管e對象已經創建,Web請求尚未啓動。 – 2010-10-08 17:38:48

190

$.active返回活動Ajax請求的數量。

更多信息here

+0

這實際上回答了這個問題。謝謝。 – 2015-10-20 16:00:21

+0

一個班輪和短的解決方案非常好 – MSTdev 2016-03-17 11:54:34

23
$(function() { 
     function checkPendingRequest() { 
      if ($.active > 0) { 
       window.setTimeout(checkPendingRequest, 1000); 
       //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active); 
      } 
      else { 

       alert("No hay peticiones pendientes"); 

      } 
     }; 

     window.setTimeout(checkPendingRequest, 1000); 
}); 
+0

似乎是一個很好的解決方案,但是,你有沒有發現任何問題的「最大調用堆棧大小」? – Mikel 2017-07-06 06:18:31

0

這撥弄使用$ .ajax.abort()方法來中止請求,如果它是積極的。它使用readyState屬性來檢查請求是否處於活動狀態。

這是Working Fiddle

HTML

<h3>Cancel Ajax Request on Demand</h3> 
<div id="test"></div> 
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" /> 

JS代碼

//Initial Message 
var ajaxRequestVariable; 
$("#test").html("Please wait while request is being processed.."); 

//Event handler for Cancel Button 
$("#btnCancel").on("click", function(){ 
if (ajaxRequestVariable !== undefined) 

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4) 
{ 
    ajaxRequestVariable.abort(); 
    $("#test").html("Ajax Request Cancelled."); 
} 
}); 

//Ajax Process Starts 
ajaxRequestVariable = $.ajax({ 
      method: "POST", 
      url: '/echo/json/', 
      contentType: "application/json", 
      cache: false, 
      dataType: "json", 
      data: { 
     json: JSON.encode({ 
     data: 
      [ 
          {"prop1":"prop1Value"}, 
        {"prop1":"prop2Value"} 
        ]   
     }), 
     delay: 11 
    }, 

      success: function (response) { 
      $("#test").show(); 
      $("#test").html("Request is completed");   
      }, 
      error: function (error) { 

      }, 
      complete: function() { 

      } 
     });