有條件地處理ajax請求

Question

每當Ajax啟動時，我都會全屏加載動畫（大多數是用戶的操作），並在完成時隱藏。 同時，我也有Ajax調用以使用setInterval檢查服務器狀態。

我如何分隔Ajax調用以檢查服務器狀態，因為它以全屏顯示時很煩人。 狀態旁邊的一個小的加載圖標很好。

可以參考以下代碼段：

 $(document).ajaxStart(function() { $.LoadingOverlay("show"); }); $(document).ajaxComplete(function() { $.LoadingOverlay("hide"); }); $(document).ready(function() { setInterval(ajaxCall, 3000); function ajaxCall() { $.ajax({ url: "action.php", type: "POST", data: { 'action': 'checkstatus' }, dataType: "json", success: function(data) { console.log('online'); $('.serverStatus').removeClass('ssOffline'); $('.serverStatus').addClass('ssOnline').text('Online'); }, error: function(xhr, ajaxOptions, thrownError) { console.log('offline'); $('.serverStatus').removeClass('ssOnline'); $('.serverStatus').addClass('ssOffline').text('Offline'); } }); } }); 

 .ssOffline { color: red; } .ssOnline { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/src/loadingoverlay.min.js"></script> <p>Server status: <label class="serverStatus">-</label></p> 

Answer 1

您可以使用默認為true的global 。此選項可以使用ajaxStart和ajaxStop之類的控件全局處理程序，這將防止顯示全屏加載圖標。

如果要顯示此呼叫的其他任何圖標，則可以使用beforeSend處理程序

 $(document).ajaxStart(function(event) { console.log(event) $.LoadingOverlay("show"); }); $(document).ajaxComplete(function() { $.LoadingOverlay("hide"); }); $(document).ready(function() { setInterval(ajaxCall, 3000); function ajaxCall() { $.ajax({ url: "action.php", type: "POST", data: { 'action': 'checkstatus' }, dataType: "json", global: false, // changed here success: function(data) { console.log('online'); $('.serverStatus').removeClass('ssOffline'); $('.serverStatus').addClass('ssOnline').text('Online'); }, error: function(xhr, ajaxOptions, thrownError) { console.log('offline'); $('.serverStatus').removeClass('ssOnline'); $('.serverStatus').addClass('ssOffline').text('Offline'); } }); } }); 

 .ssOffline { color: red; } .ssOnline { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/src/loadingoverlay.min.js"></script> <p>Server status: <label class="serverStatus">-</label></p> 

Answer 2

您可以設置一個屬性jQuery.ajax()設置對象，使用替代beforeSend在$.ajaxSetup()用於.ajaxStart()檢查當前的設置有屬性集

 function log(message) { $("pre").text(function(_, text) { return text + message + "\\n" }) } // does not provide `settings` or `jqxhr` as argument // we do not perform logic evaluation of current `$.ajax()` call here $(document).ajaxStart(function() { log("ajax start"); }); $(document) .ajaxComplete(function(e, jqxhr, settings) { if (!settings.pollRequest) { log("not poll request complete\\n"); // $.LoadingOverlay("hide"); } else { log("poll request complete\\n"); } }); $.ajaxSetup({ beforeSend: function(jqxhr, settings) { if (settings.pollRequest) { log("poll request beforeSend"); // $.LoadingOverlay("show"); } else { log("not poll request beforeSend"); } } }); $(document).ready(function() { setInterval(ajaxCall, 3000); function ajaxCall() { "ajaxCall"; $.ajax({ url: "data:text/plain,", pollRequest: true }); } $("button").on("click", function() { $.ajax("data:text/plain,") }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <button> click </button> <pre></pre> 

jsfiddle https://jsfiddle.net/5hfty5mc/