Question

我已经为此查看了几个答案，the most informative of which说＆＃34;一旦启动AJAX请求就显示出来＃34;然后＆＃34;再次隐藏图像请求已完成＆＃34;。我该怎么办？是这样的：

showGif();
$.ajax({
    url: whatever,
    success: function(data) {
        hideGif();
    }
});

或者有更好的方法吗？如果ajax请求没有成功怎么办？

Answer 1

我倾向于使用传统的HTML和CSS将加载gif设置为页面样式，但默认情况下我将其设置为隐藏。然后，您可以使用AJAX事件处理程序来隐藏和显示您的加载gif，而无需重复任何代码：

$(document).bind("ajaxSend", function(){
   $("#loading").show();
}).bind("ajaxComplete", function(){
   $("#loading").hide();
});

Answer 2

我建议在always上运行此功能，以便隐藏请求是成功还是失败：

showGif();
$.ajax({
    url: whatever,
    success: function(data) {
        //
    }
}).always(function(){
     hideGif();
});

Answer 3

如果您在ajax hideGif();中执行success，则没有问题。但我建议你把它变成ajax complete。

Ajax complete：请求完成时调用的函数（执行成功和错误回调后）。

   showGif();
    $.ajax({
        url: whatever,
        success: function(data) {
           //-- Do your other stuff here
        },
        complete: function () {
          hideGif();
       } 
    });

Answer 4

或者有更好的方法吗？

我不这么认为。

如果ajax请求没有成功怎么办？

您可以扩展此方法以在发生错误时显示错误消息。

showGif();
$.ajax( "example.php" )
  .done(function() {
    // success
  })
  .fail(function() {
    // error
    alert( "error" );
  })
  .always(function() {
    hideGif();
  });

将加载gif添加到ajax请求

4 个答案: