等待AJAX​​响应时如何加载图像? [英] How do I load an image while waiting for AJAX response?

问题描述

我想知道是否可以得到一些指导.我正在尝试从ajax请求获取响应时使用加载gif.我遇到的问题是，发送电子邮件时不会显示gif.

I was wondering if I could get some pointers. I am trying to use a loading gif while getting a response from an ajax request. The issue I am running into is that it will not display the gif while sending an email.

我在这里查看了几页，试图找到解决方案，但是似乎都没有用.这些是我查看过的页面:在jQuery ajax处于加载状态时加载gif图像正在运行和在使用ajax发布信息时显示加载图片，并且在执行$ .ajax时显示加载图像

I have looked at several pages on here to try and find a solution but none of them seems to be working. These are the pages I have looked at: Loading gif image while jQuery ajax is running and Display loading image while post with ajax and Show loading image while $.ajax is performed

我已使用以下代码尝试实现这一目标:

I have used the following code to try and achieve this:

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

这不显示gif，我也尝试了以下操作:

This does not show the gif, I have also tried the following:

$.ajax({
 type: "POST",
 url: "contact1.php",
 data: dataString,
 beforeSend: loadStart,
 complete: loadStop,
 success: function() {
  $('#form').html("<div id='msg'></div>");
  $('#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("<div id='msg'></div>");
  $('#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();
}

我还尝试过将$(#loading").show()放在ajax请求之前，并在成功和错误函数中取消使用.hide().我仍然什么也没显示.

I have also tried putting $("#loading").show() before the ajax request and unsing .hide() in the success and error functions. I still get nothing showing.

预先感谢

推荐答案

实际上，您需要通过侦听ajaxStart和Stop事件并将其绑定到document:

Actually you need to do this by listening ajaxStart and Stop events and binding it to the 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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn">Click Me!</button>
<p class="text"></p>
<div id="loading">
  <!-- You can add gif image here 
  for this demo we are just using text -->
  Loading...
</div>

这篇关于等待AJAX​​响应时如何加载图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！