jquery的ajax提交時loading提示的處理方法

方法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提交時候，建議使用第二種方式，因為“加載中。。。”圖標可以顯示在任意你需要刷新的位置上！！！！！這就是它的優勢：自由呀！！！！