Javascript 向ajax请求添加加载gif

我看了几个答案，说“在启动AJAX请求时立即显示”，然后“在请求完成后再次隐藏图像”。我该怎么做？是不是像：

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

---

还是有更好的方法？如果ajax请求没有成功怎么办？

我建议总是在

上运行它，这样无论请求成功还是失败都会被隐藏：

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

我建议在
始终
上运行此选项，以便无论请求成功还是失败都隐藏此选项：

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

如果执行
hideGif（），则没有问题在ajax中
成功
。但我建议您将其应用到ajax中

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

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

如果执行
hideGif（），则没有问题在ajax中
成功
。但我建议您将其应用到ajax中

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

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

还是有更好的方法

我不这么认为

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

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

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

还是有更好的方法

我不这么认为

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

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

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

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

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

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

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

这就是你应该去的地方。您还可以将其放入
complete
中，这样无论是成功回调还是错误回调，它都会触发。@JohnP啊，这可能是我需要的。无论发生什么情况，
complete
是否在请求完成时触发？是的。请记住，它在
成功
和
错误
回调后触发。我不知道订单对你来说是否重要，但一般来说并不重要。你应该这样做。您还可以将其放入
complete
中，这样无论是成功回调还是错误回调，它都会触发。@JohnP啊，这可能是我需要的。无论发生什么情况，
complete
是否在请求完成时触发？是的。请记住，它在
成功
和
错误
回调后触发。我不知道订单对您是否重要，但一般来说并不重要。
$之间有什么区别。总是
和
complete
？
complete
不受欢迎<代码>始终
是新的首选方法<代码>弃用通知：从jQuery 1.8开始，jqXHR.success（）、jqXHR.error（）和jqXHR.complete（）回调已弃用。要准备代码以便最终删除它们，请改用jqXHR.done（）、jqXHR.fail（）和jqXHR.always（）。
之间的区别是什么。
$。always
和
complete
？
complete
不推荐使用<代码>始终
是新的首选方法<代码>弃用通知：从jQuery 1.8开始，jqXHR.success（）、jqXHR.error（）和jqXHR.complete（）回调已弃用。要准备代码以便最终删除，请使用jqXHR.done（）、jqXHR.fail（）和jqXHR.always（）。