在表單提交中添加jquery預加載器

Question

我使用jquery和AJAX異步提交表單。請參閱下面

$("#save_report").click(function() 
       { 
        $.ajax({ 
         url : actionOfForm, 
         type : $('#custom_targeting_param_form').attr("method"), 
         data : $('#custom_targeting_param_form').serialize(), 
         success : function(){ 
          alert('Report Saved successfully'); 
          $("#showOrExportCustomTargetingReport").val('showReport'); 
         } 
        }); 
        return false; 
       }); 

的代碼，我已經得到了我的HTML鏈接與ID save_report並點擊如圖所示，這是因爲actionOfForm變量傳遞的URL Ajax調用正在取得的鏈接以上。

直到這一切都很好。但現在我想要獲得像加載的預加載器圖像/文本..而表單提交發生在後臺。而且我想表明它在一個警告框，而不是我的html ...

因爲我是一個新用戶抱歉不能發佈圖片，但我希望我comprehendable

一旦表單提交完成後，預加載器圖像將消失，並替換成功消息警報。

你能幫我解決嗎？

Answer 1

我想你可以有你的圖像中的div..intially隱藏..

<div id="imgDiv" style="display:none"><img src="/img.png"/><div> 

然後點擊你的鏈接（在AJAX調用）對..顯示在頁面頂部這個div（你必須使用一些CSS屬性）。像這樣 -

$("#save_report").click(function() 
       { 
        $('#imgDiv').show();// show your loading image 
       $.ajax({ 
         url : actionOfForm, 
         type : $('#custom_targeting_param_form').attr("method"), 
         data : $('#custom_targeting_param_form').serialize(), 
         success : function(){ 
          alert('Report Saved successfully'); 
          $('#imgDiv').hide();// hide your image after successful call 
          $("#showOrExportCustomTargetingReport").val('showReport'); 
         } 
        }); 
        return false; 
       });