在等待AJAX​​响应时加载gif

我想知道我是否能得到一些指示。 我试图在从ajax请求获得响应时使用加载gif。 我遇到的问题是它在发送电子邮件时不会显示gif。

我在这里看了几个页面试图找到一个解决方案，但它们似乎都没有工作。 这些是我看过的页面： 在jQuery ajax运行时加载gif图像， 在使用ajax发布时 显示加载图像，在执行$ .ajax时显示加载图像

我使用以下代码尝试实现此目的：

$("#loading").bind("ajaxStart", function(){ $(this).show(); }).bind("ajaxStop", function(){ $(this).hide(); }); 

这没有显示gif，我也尝试了以下内容：

 $.ajax({ type: "POST", url: "contact1.php", data: dataString, beforeSend: loadStart, complete: loadStop, success: function() { $('#form').html("
"); $('#msg').html("Thank you for your email. I will respond within 24 hours. Please reload the page to send another email.") }, error: function() { $('#form').html("
"); $('#msg').html("Please accept my apologies. I've been unable to send your email. Reload the page to try again.") } }); return false; }); function loadStart() { $('#loading').show(); } function loadStop() { $('#loading').hide(); } 

我还尝试在ajax请求之前放置$（“＃loading”）。show（）并在成功和错误函数中放置.hide（）。 我仍然没有得到任何表现。

提前致谢

Answer 1

实际上，您需要通过监听ajaxStart和Stop事件并将其绑定到document来执行此操作：

 $(document).ready(function () { $(document).ajaxStart(function () { $("#loading").show(); }).ajaxStop(function () { $("#loading").hide(); }); }); 

 $(document).ajaxStart(function() { $("#loading").show(); }).ajaxStop(function() { $("#loading").hide(); }); $('.btn').click(function() { $('.text').text(''); $.ajax({ type: "GET", dataType: 'jsonp', url: "https://api.meetup.com/2/cities", success: function(data) { $('.text').text('Meetups found: ' + data.results.length); } }); }); 

 #loading { display: none; } 

  Click Me! 
 
  Loading...