jquery post顯示加載消息，直到成功

Question

我有以下腳本，基於表單參數從服務器獲取數據。

jQuery('#request_search').submit(function(e){ 
    e.preventDefault(); 


     var s_date=jQuery('#actualfrom').val(); 
     var e_date=jQuery('#actualto').val(); 
     var type=jQuery("#type").val(); 
     var loc=jQuery("#loc").val(); 



jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) { 

jQuery('#report').html(data);}); 


     }); 



}); 

這部分正在工作，有時根據搜索條件，需要幾秒鐘才能得到結果。同時我想展示一些GIF說數據加載。我準備好了GIF。如何在上面的腳本中實現它？

Answer 1

請試試這個。

jQuery('#request_search').submit(function(e){ 

     $("#report").html("<div><img src='loading.gif' alt='Loading.. \n Please wait' title='Loading.. \n Please wait'` /></div>"); 
    e.preventDefault(); 


     var s_date=jQuery('#actualfrom').val(); 
     var e_date=jQuery('#actualto').val(); 
     var type=jQuery("#type").val(); 
     var loc=jQuery("#loc").val(); 



jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) { 

jQuery('#report').html(data);}); 
     }); 
}); 

Answer 2

與路徑在HTML文件添加圖像的ID屬性，然後顯示基於請求和成功/隱藏DIV 。

試試下面的代碼：

添加HTML DIV在HTML文件：

<div id='loadingmessage' style='display:none'> 
    <img src='loadinggraphic.gif'/> 
    </div> 

嘗試的jQuery的代碼如下：

jQuery('#request_search').submit(function(e){ 


$('#loadingmessage').show(); // show the loading message. 
    e.preventDefault(); 


     var s_date=jQuery('#actualfrom').val(); 
     var e_date=jQuery('#actualto').val(); 
     var type=jQuery("#type").val(); 
     var loc=jQuery("#loc").val(); 



jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) { 

jQuery('#report').html(data);}); 
    $('#loadingmessage').hide(); // hide the loading message 
     }); 
});