Question

每当Ajax启动时（我们大多数是用户操作）我都有一个全屏加载动画，并在完成时隐藏。同时我也使用setInterval进行Ajax调用以检查服务器状态。

如何将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的{{3}}。此选项可以使用控件全局处理程序，如ajaxStart和ajaxStop。这样可以防止全屏加载图标出现。

如果您想要显示特定于此调用的任何其他图标，您可以使用beforeSend处理程序

＆＃13;

$(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');
      }
    });
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以在jQuery.ajax()设置对象设置属性，使用beforeSend替换$.ajaxSetup() .ajaxStart()，检查当前设置是否已设置属性

＆＃13;

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,")
  })
});

＆＃13;

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

＆＃13;

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

有条件地处理ajax请求

2 个答案: