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

您可以使用默认的 global true。此选项可以使用控制全局处理程序，如 ajaxStart 和 ajaxStop.This 将防止全屏加载图标出现。

如果您想显示任何其他特定于此调用的图标，您可以使用 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 at $.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/

有条件地处理 ajax 请求

Conditionally handle ajax request

html

javascript

jquery

animation

loading