Javascript jqueryajax-在单击之后但在加载内容之前显示加载div？

我有以下代码将隐藏

列表btn

div并加载

列表响应

div。但是加载

列表响应

div可能需要1-5秒，因此我想让它在发生时显示一个名为

列表等待

的div，然后一旦

列表响应

显示，再次隐藏等待的

列表

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

我该怎么做

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调用之前隐藏
列表btn
并显示
列表等待
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
    });
  });
});

实现这一点的另一种方法是“发送前”。就像您有“成功”和“错误”这样的事件一样，也有“发送前”事件：

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

因此，在执行AJAX调用之前，显示
列表waiting
DIV，并将其隐藏在
success
和
error
函数中。或者隐藏在。always函数
show（）
在更改
显示时应该是即时的。。您是否用响应数据填充div？这是完美而简单的。非常感谢！：）
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();
      });
   });
});