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

来源

2017-10-21 4 Leave Cover

可以使用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>

来源

2017-10-21 04:50:20 brk

嗨，你可以包括状态旁边的小加载图标对我来说太？谢谢。 –

@ 4LeaveCover请勿发布编码任务。即使他们看起来像一个评论。很不礼貌。这个网站上有无数的例子，用jQuery Ajax加载图标。做一些研究并挑选其中一个。 – Tomalak

您可以设置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/

来源

2017-10-21 05:11:53 guest271314

有条件地处理ajax请求

回答

相关问题