jquery - 在 AJAX 请求期间显示/隐藏不起作用

Question

我有一个使用 ajax 请求数据的函数。我想显示一个忙碌的微调器，但隐藏/显示不会改变元素的可见性。

function RequestDataFromServer(stuff, url) {
    var result;

    $.ajax({
        url: url,
        data: { stuff: Stuff},
        async: false,
        beforeSend: function () {
            $("#divOverlay").show();
            console.log("Starting...");
        },
        complete: function () {
            $("#divOverlay").hide();
            console.log("Complete!");
            result = true;
        },
        success: function (data) {
            AddDataToCache(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            result = false;
        }
    });

    return result;
}

我知道显示/隐藏语法是正确的，因为当我将它附加到按钮时它会起作用。我也尝试过使用:

$(document).ajaxStart(function(){
    $("#divOverlay").show();
}) 

没有影响(但是，如果我在 Chrome 中单步执行此事件，它会显示和隐藏元素)。我还尝试在调用 RequestDataFromServer 函数的函数中显示/隐藏......仍然没有。我没主意了。

Answer 1

我对此进行了测试，.show() 和 .hide() 在我的 ajax 调用中工作得很好。我猜你有一些语法错误导致了这个。让我们做些家务吧。

首先，正如其他人所提到的，使您尝试显示的元素在 DOM 中可访问。这是 IMO 最常见的遗漏。我假设您有一个元素，例如:

<div id="divOverlay" style="display:none;">Something</div>

其次，变量区分大小写。确保变量 stuff 在作为 data: {stuff: stuff} 传递时是小写的。

第三，值得注意的是 complete 在 success 或 error 之后被调用，因此你的 result = true 应该在 success 而不是 complete 中定义。

function RequestDataFromServer(stuff, url) {
  var result;

  $.ajax({
    url: url,
    data: {stuff: stuff},
    async: false,
    beforeSend: function () {
      $("#divOverlay").show();
      console.log("Starting...");
    },
    complete: function () {
      $("#divOverlay").hide();
      console.log("Complete!");
    },
    success: function (data) {
      AddDataToCache(data);
      result = true;
    },
    error: function () {
      result = false;
    }
  });

  return result;
}