Question

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

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      countries
    ],
    view: view
  });

我知道show / hide语法是正确的，因为它在我将它附加到按钮时起作用。我也尝试过使用：

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;
}

没有任何影响（但是，如果我在Chrome中逐步执行此事件，它会显示并隐藏元素）。我也试过在调用RequestDataFromServer函数的函数中显示/隐藏......仍然没有。我没有想法。

Answer 1

我对此进行了测试，.hide()和<div id="divOverlay" style="display:none;">Something</div>在我的ajax调用中工作得很好。我猜你有一些导致这种情况的语法错误。让我们做一些家务。

首先，正如其他人所提到的那样，在DOM中可以访问您尝试显示的元素。这是最常见的遗漏IMO。我认为你有一个元素如：

stuff

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

第三，值得注意的是，在success或error后调用result = true，因此success应该在{{1}中真正定义而不是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;
}

Answer 2

我有同样的问题，它在async：true时有效。仍然不知道原因，但它有效。

Answer 3

在你的divOverlay css display中尝试这个用法：none; 这项工作也是如此。

$(document).ajaxStart(function(){
            $("#divOverlay").css("display", "block");
        });

你有ajax

beforeSend: function () {
            $("#divOverlay").show();
            console.log("Starting...");

这意味着“在发送我的ajx之前显示我的div”你写了2次相同的指令。选择一个并删除另一个。

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

3 个答案: