有条件地处理ajax请求
问题描述：
无论何时Ajax启动（大部分都是用户的操作）并在完成时隐藏，我都有一个全屏加载动画。同时，我还使用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/[email protected]/src/loadingoverlay.min.js"></script>
<p>Server status: <label class="serverStatus">-</label></p>
答
可以使用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/[email protected]/src/loadingoverlay.min.js"></script>
<p>Server status: <label class="serverStatus">-</label></p>
答
您可以设置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/
嗨，你可以包括状态旁边的小加载图标对我来说太？谢谢。 –
@ 4LeaveCover请勿发布编码任务。即使他们看起来像一个评论。很不礼貌。这个网站上有无数的例子，用jQuery Ajax加载图标。做一些研究并挑选其中一个。 – Tomalak