jquery的ajax提交時loading提示的處理方法
阿新 • • 發佈：2019-02-19
方法1：使用ajaxStart方法定義一個全域性的“載入中。。。”提示
$(function(){
$("#loading").ajaxStart(function(){
$(this).html("<img src='/jqueryStu/images/loading.gif' />");
});
$("#loading").ajaxSuccess(function(){
$(this).html("");
// $(this).empty(); // 或者直接清除
});
}）;
<div id="loading"></div>
注意：
所有的ajax提交都會觸發ajaxStart事件，都會在你定義的
<div id="loading"></div>
位置上顯示“載入中。。。”的圖示（當然你也可以定義文字，但是一個載入中的圖片比較好看）；
-------但是一定要注意，同時要定義好ajaxSuccess事件，ajax提交成功後把這個圖示隱藏起來！！！
特別提示：
使用ajaxStart或ajaxSuccess事件時，相當於定義了一個全域性的顯示“載入中。。。”的位置，所有ajax提交時候“載入中。。。”的圖示都始終顯示在一個位置！！！！
方法2：在ajax方法中定義任意位置顯示的“載入中。。。”提示
$('#ajax_test2').click(function(){
$.ajax({
url ---- url路徑，根據你需要些啦,
type:'post',
data:'name=ZXCVB',
timeout:15000,
beforeSend:function(XMLHttpRequest){
//alert('遠端呼叫開始...');
$("#loading").html("<img src='/jqueryStu/images/loading.gif' />");
},
success:function(data,textStatus){
alert('開始回撥，狀態文字值：'+textStatus+' 返回資料：'+data);
// $("#loading").empty();
},
complete:function(XMLHttpRequest,textStatus){
// alert('遠端呼叫成功，狀態文字值：'+textStatus);
$("#loading").empty();
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert('error...狀態文字值：'+textStatus+" 異常資訊："+errorThrown);
$("#loading").empty();
}
});
});
<input type="button" id="ajax_test2" value="Ajax方式">
<div id="loading"></div>
很明顯，在beforeSend時，在指定的位置顯示“載入中。。。”圖示，在error、complete、success後把該圖示移除掉！！！！
注意：
頁面有多個ajax提交時候，建議使用第二種方式，因為“載入中。。。”圖示可以顯示在任意你需要重新整理的位置上！！！！！這就是它的優勢：自由呀！！！！
$(function(){
$("#loading").ajaxStart(function(){
$(this).html("<img src='/jqueryStu/images/loading.gif' />");
});
$("#loading").ajaxSuccess(function(){
$(this).html("");
// $(this).empty(); // 或者直接清除
});
}）;
<div id="loading"></div>
注意：
所有的ajax提交都會觸發ajaxStart事件，都會在你定義的
<div id="loading"></div>
位置上顯示“載入中。。。”的圖示（當然你也可以定義文字，但是一個載入中的圖片比較好看）；
-------但是一定要注意，同時要定義好ajaxSuccess事件，ajax提交成功後把這個圖示隱藏起來！！！
特別提示：
使用ajaxStart或ajaxSuccess事件時，相當於定義了一個全域性的顯示“載入中。。。”的位置，所有ajax提交時候“載入中。。。”的圖示都始終顯示在一個位置！！！！
方法2：在ajax方法中定義任意位置顯示的“載入中。。。”提示
$('#ajax_test2').click(function(){
$.ajax({
url ---- url路徑，根據你需要些啦,
type:'post',
data:'name=ZXCVB',
timeout:15000,
beforeSend:function(XMLHttpRequest){
//alert('遠端呼叫開始...');
$("#loading").html("<img src='/jqueryStu/images/loading.gif' />");
},
success:function(data,textStatus){
alert('開始回撥，狀態文字值：'+textStatus+' 返回資料：'+data);
// $("#loading").empty();
},
complete:function(XMLHttpRequest,textStatus){
// alert('遠端呼叫成功，狀態文字值：'+textStatus);
$("#loading").empty();
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert('error...狀態文字值：'+textStatus+" 異常資訊："+errorThrown);
$("#loading").empty();
}
});
});
<input type="button" id="ajax_test2" value="Ajax方式">
<div id="loading"></div>
很明顯，在beforeSend時，在指定的位置顯示“載入中。。。”圖示，在error、complete、success後把該圖示移除掉！！！！
注意：
頁面有多個ajax提交時候，建議使用第二種方式，因為“載入中。。。”圖示可以顯示在任意你需要重新整理的位置上！！！！！這就是它的優勢：自由呀！！！！