ajax請求完畢之前顯示正在載入程式碼例項

admin發表於2017-03-30

本章節介紹一個ajax請求中比較常見的效果。

通常情況下如何要在一個版塊通過ajax方式載入遠端內容的時候，通常在載入完畢之前會給出一定的提示效果，使用者一看就知道，有內容正在載入中，而不是任務網頁存在故障或者說就是沒有任何，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $.ajax({
    url:"demo/ajax/net/Async.aspx",
    async:true,
    beforeSend:function(){
      $('#show').html('<img src="demo/ajax/net/img/wait.gif">');
    },
    success:function(data){
      $("#show").html(data);  
    }
  })
});
</script>
</head>
<body>
<div id="show"></div> 
</body>
</html>

上面你的程式碼實現了我們的要求，在ajax請求完成之前，div中會顯示一個旋轉載入等待圖片。

相關文章