将加载图像添加到jquery ajaxpost

我有以下javascript通过ajax发布表单而不刷新屏幕。 由于post需要一段时间，我想在处理过程中添加加载图像。

我看到这篇文章，但它似乎只列出.load（）或.get（）而不是$ .post。

 $(document).ready(function() { $('#contact form').live('submit', function() { $.post($(this).attr('action'), $(this).serialize(), function(data) { $("#contact").replaceWith($(data)); }); return false; }); });  

Answer 1

只需添加几个调用来隐藏/显示你的加载屏幕/ div，无论如何：

  
I'm loading, image here, whatever you want 

Answer 2

我把它放在每个ajax调用中显示，无论我有哪一个（我有几个）

  /* show the message that data is loading on every ajax call */ var loadingMessage = 'Please wait loading data for ' + defaultPageDoctor; $(function() { $("#Errorstatus") .bind("ajaxSend", function() { $(this).text(loadingMessage); $(this).show(); }) .bind("ajaxComplete", function() { $(this).hide(); }); }); Just create an element with the #ErrorStatus id such as: 
    
 Now for the bonus rounds, you can use this area to put other messages up, I also include a timer: /* show message for interval */ var saveMessageText = 'Saving...'; function ShowStatus(saveMessage, message, timeInMilliseconds) { var errorMessage = $("#Errorstatus"); if (saveMessage) { errorMessage.show(); //var myNumber = 0; var myInterval = window.setInterval(function() { message = message + '...'; errorMessage.text(message); errorMessage.show(); }, 1000); window.setTimeout(function() { clearInterval(myInterval); errorMessage.hide(); }, timeInMilliseconds); } else { errorMessage.text(message); errorMessage.show(); window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds); }; }; 

像这样使用它：

  ShowStatus(true, 'Save Failed with unknown Error', 4000);