Question

我有以下代码隐藏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
  });
});
});

Answer 1

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

之前隐藏回调中的list-response 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
    });
  });
});

Answer 2

实现这一目标的另一种方法是＆＃34; beforeSend＆＃34;。就像你有像＆＃34;成功＆＃34;等事件一样。和＆＃34;错误＆＃34;，有一个＆＃34; beforeSend＆＃34;事件：

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

Answer 3

如果您使用的是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();
      });
   });
});

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

3 个答案: