顯示「加載」的形象時，AJAX調用正在進行

Question

我有以下的jQuery的Ajax調用：

$.ajax({ 
        type: "POST", 
        url: "addtobasket.php", 
        data: "sid=<?= $sid ?>&itemid=" + itemid + "&boxsize=" + boxsize + "&ext=" + extraval, 
        success: function(msg){ 
        $.post("preorderbasket.php", { sid: "<?= $sid ?>", type: "pre" }, 
        function(data){ 
         $('.preorder').empty(); 
         $('.preorder').append(data); 
        }); 
        } 
       }); 

我要顯示的圖像時，Ajax調用正在進行中。我怎樣才能做到這一點？

感謝，

Answer 1

試試這個：

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#loading') 
      .hide() 
      .ajaxStart(function() { 
       $(this).show(); 
      }) 
      .ajaxStop(function() { 
       $(this).hide(); 
      }); 
    }); 
</script> 

<div id="loading"> 
     Loading.... 
</div> 

這將你正在做一個Ajax請求，每次顯示加載圖像，我已經implented這個div在我的網頁的頂部，因此它不會與頁面阻撓，但你總是可以看到當一個Ajax調用是怎麼回事上。

Answer 2

你可以只此調用$阿賈克斯（）之前顯示的圖像，然後隱藏/只是你.empty（）/刪除之前在後處理功能（圖像。追加（數據）調用

Answer 3

沿着這些東西線（showLoadingImage和hideLoadingImage是由你）：

// show the loading image before calling ajax. 
showLoadingImage(); 

$.ajax({ 
    // url, type, etc. go here 
    success: function() { 
     // handle success. this only fires if the call was successful. 
    }, 
    error: function() { 
     // handle error. this only fires if the call was unsuccessful. 
    }, 
    complete: function() { 
     // no matter the result, complete will fire, so it's a good place 
     // to do the non-conditional stuff, like hiding a loading image. 

     hideLoadingImage(); 
    } 
});