jquery的ajax提交時“載入中”提示的處理方法_ajax

 

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