jquery ajax - 在点击后但在内容加载之前显示加载div？答案

【问题标题】：jquery ajax - show loading div after click but before content loads?jquery ajax - 在点击后但在内容加载之前显示加载div？
【发布时间】：2015-03-12 17:42:56
【问题描述】：

我有以下代码将隐藏list-btn div 并加载list-response div。但是，list-response div 可能需要 1-5 秒才能加载，所以我想让它显示一个名为 list-waiting 的 div，而一旦出现 list-response 显示，再次隐藏 list-waiting。

它们都在同一个地方，基本上是相互替换的，所以我一次只需要显示其中一个。

我该怎么做？

jQuery(document).ready(function($){
$('.add-to-list').click(function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $.ajax({
    url: "https://www.domain.com/page.php?add=" + id,
    type: "GET",
    success: function (data) {
        $("#list-btn-" + id).hide();
        $("#list-response-" + id).show();
    },
    error: function (xhr, ajaxOptions, thrownError) {
        $("#list-btn-" + id).hide();
        $("#list-response-" + id).html('ERROR');
    },
    timeout: 15000
  });
});
});

【问题讨论】：

所以在进行 AJAX 调用之前显示list-waiting DIV，并将其隐藏在success 和error 函数中。
或隐藏在.always函数中
show() 应该是即时的，因为它会更改 display.. 您是否使用响应数据填充 div？

标签： javascript jquery ajax

【解决方案1】：

在 AJAX 调用之前隐藏 list-btn 并显示 list-waiting div。然后在显示list-response div之前在回调中隐藏list-waiting div。

jQuery(document).ready(function($){
  $('.add-to-list').click(function (e) {
    e.preventDefault();
    var id = $(this).data("id");
    $("#list-btn-" + id).hide();
    $("#list-waiting-" + id).show();
    $.ajax({
      url: "https://www.domain.com/page.php?add=" + id,
      type: "GET",
      success: function (data) {     
          $("#list-waiting-" + id).hide();       
          $("#list-response-" + id).show();
      },
      error: function (xhr, ajaxOptions, thrownError) {
          $("#list-waiting-" + id).hide();       
          $("#list-response-" + id).html('ERROR');
      },
      timeout: 15000
    });
  });
});

【讨论】：

完美而简单。非常感谢！ :)

【解决方案2】：

如果您使用的是 jQuery 1.8 或更高版本，我会建议

jQuery(document).ready(function($){
    $('.add-to-list').on("click",function (e) {
      e.preventDefault();
      var id = $(this).data("id");
      $("#list-btn-" + id).hide();
      $("#list-response-" + id).empty().hide();
      $("#list-waiting-" + id).show();
      $.ajax({
        url: "https://www.domain.com/page.php?add=" + id,
        type: "GET",
        timeout: 15000
      }).done(function (data) {     
        $("#list-response-" + id).html(data).show();
      }).fail(function (xhr, ajaxOptions, thrownError) {
        $("#list-response-" + id).html('ERROR').show();
      }).always(function() {});
        $("#list-waiting-" + id).hide();
      });
   });
});

【讨论】：

【解决方案3】：

实现此目的的另一种方法是“beforeSend”。就像你有“成功”和“错误”之类的事件一样，有一个“beforeSend”事件：

$.ajax({
  url: "the.url.org",
  beforeSend: function() {
    $("#list-waiting-" + id).show();
    //doStuff
  },
  success: function() {
    $("#list-waiting-" + id).hide();
    //doOtherStuff
  }
})

【讨论】：