想要顯示ajax加載gif

Question

我正在使用DataTables。而我的所有代碼工作正常。現在我想把阿賈克斯加載gif。任何人都可以幫我把ajax loader gif？這是我的代碼。感謝

  <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
     $("#dvloader").show(); 
      oTable = $('#example').dataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers"     
      }); 
     });     
     (document).ready(function() { 
      $("#btnround").click(function(){ 
       $.ajax({ 
        url: "ajax_request.php", 
        cache: false, 
        async: true, 
        data: "shape=ROUND", 
        success: function(html){ 
        $(".demo_jui").html(html); 
       } 
       }); 
      }); 
    }); 
      </script> 

Answer 1

使用

ajaxStart（）

和

ajaxComplete（）

用於顯示和隱藏加載gif的函數。

$("#loading").ajaxStart(function(){ 
    $(this).show(); 
}); 

$("#loading").ajaxComplete(function(){ 
    $(this).hide(); 
}); 

雖然在div或元件ID爲

裝載

具有加載GIF。

你的最終代碼應該是這樣的：

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $("#dvloader").show(); 
     oTable = $('#example').dataTable({ 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers" 
     }); 
    }); 
    (document).ready(function() { 
     $("#btnround").click(function() { 
      $.ajax({ 
       url: "ajax_request.php", 
       cache: false, 
       async: true, 
       data: "shape=ROUND", 
       success: function(html) { 
        $(".demo_jui").html(html); 
       } 
      }); 
     }); 
     $("#loading").ajaxStart(function(){ 
      $(this).show(); 
     }); 

     $("#loading").ajaxComplete(function(){ 
      $(this).hide(); 
     });   

    }); 
</script> 

Answer 2

這應該是很容易的：

<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
     $("#dvloader").show(); 
      oTable = $('#example').dataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers"     
      }); 
     });     
     (document).ready(function() { 
      $("#btnround").click(function(){ 
       $(".demo_jui").html('<img src="path/to/loading.gif" />'); 
       $.ajax({ 
        url: "ajax_request.php", 
        cache: false, 
        async: true, 
        data: "shape=ROUND", 
        success: function(html){ 
        $(".demo_jui").html(html); 
       } 
       }); 
      }); 
    }); 
      </script> 

Answer 3

希望這會幫助你。添加beforeSend並完成屬性並調用相應的函數。

$("#btnround").click(function(){ 
    $.ajax({ 
    url: "ajax_request.php", 
    cache: false, 
    async: true, 
    data: "shape=ROUND", 
    beforeSend : fnLoadStart, 
    complete : fnLoadStop, 
    success: function(html){ 
     $(".demo_jui").html(html); 
     }     
     });    
    }); 

    function fnLoadStart() { 
      $("#dvloader").show(); // this div should have loader gif 
    } 
    function fnLoadStop() { 
      $("#dvloader").hide(); 
    }