有条件地处理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/