jQuery實現Ajax請求時,頁面顯示等待的效果,超過指定請求時間后,進行其他操作


  背景:有一個按鈕,點擊之后向后端程序發起Ajax請求,在請求結果沒有返回之前,頁面顯示等待的效果,此時仍舊是異步請求,等待的效果在接收到結果后撤銷。

  需求:因為網絡延遲或者后端程序的問題,在發起Ajax請求后,可能等待10s都接收不到數據,現在需要做的就是,如果等待時間超過10s,那么就提示用戶進行其他操作,不用再繼續等待結果,終止Ajax獲取到數據后的操作,即認為Ajax永遠取不到數據了。

  解決方案:可以使用Jquery的ajax方法,方法中有timeout和error這兩項,timeout的值是一個Number,表示多少毫秒超時;對應的error的值是一個function,是在執行ajax失敗后的操作,因為指定timeout之后,一旦超時,則認為出現error,所以會執行error綁定的function。

  示例如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="jquery.min.js"></script>
</head>
<body>
	<p id="p1"></p>
</body>
<script>
	$.ajax({
		url:"test.php",
		timeout:2000,
		success:function(data){$("#p1").html(data)},
		error:function(){$("#p1").html("wrong")}
	});
</script>
</html>

  測試的時候,可以再test.php執行sleep函數,讓ajax在指定時間內取出到結果。

  需要注意的是:ajax請求已經發出了,即使timeout,你也是不能中斷請求的,只不過現在你可以不再關心請求的返回結果,因為在timeout之后,即使獲得結果,也不會執行ajax中為success綁定的事件。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM