繁体   English   中英

jQuery Ajax-在单击后但在内容加载之前显示加载div?

[英]jquery ajax - show loading div after click but before content loads?

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

隐藏list-btn并在AJAX调用之前显示list-waiting div。 然后在显示list-response div之前在回调中隐藏list-waiting 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
    });
  });
});

完成此操作的另一种方法是“ beforeSend”。 就像您有“成功”和“错误”之类的事件一样,还有一个“ beforeSend”事件:

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM