關於AJAX請求時 加入 進度條

一、引入要顯示的GIF圖片

<img id="img" class="active" style="display:none" alt="" src="xxxxx/loading.gif"/>

這裏class 選擇了本地樣式，若想本身編寫樣式，可用css本身編寫。

二、獲取這個GIF對象

<script type="text/javascript">
    var img = $("#img"); 

</script>

三、發送請求前顯示圖片，完成請求後，隱藏圖片

<script type="text/javascript">

var img = $("#img"); 
		$.ajax({
			type : "post",
			url : "XXXXX",
			data : data,
			dataType : "json",
			//顯示圖片
			beforeSend:function(){ 
				img.show().css({ 
				"position": "fixed", 
				"top": "40%", 
				"left": "45%", 
				}); 
			}, 
			//隱藏圖片
				complete:function(){ 
				img.hide(); 

			} ,
			success : function(data) {
				
				//此處爲ajax至此那個成功後
			},
			
 
		});
	</script>