jquery ajaxstart ajaxstop 显示隐藏

Question

由于通常看似简单的事情需要几天的时间才能解决，也许有人可以给我指出一个解决方案，但两天后我放弃了以下问题；

在 html 中，我有一个按钮，应该通过 ajax 调用触发数据加载:

<button type="" class="btn" onclick="getData(); return false;">Show Data</button>

在 JavaScript 中:

$(document).ajaxStart(function() {
    $("#qloader").show();
}).ajaxStop(function() {
    $("#qloader").hide('slow');
});​

并且在 id qloader 的 html div 中定义为 100% 宽度和高度，微调器以背景为中心，z-index 高于其他:

<div id="qloader" class="myLoader" >&nbsp;</div>

现在，当页面加载时，执行ajax调用以获取初始数据，qloader div被调出并显示旋转器 - 动画，ajax调用完成后，qloader被ajaxStop隐藏。

接下来，当我点击按钮(显示数据)发起另一个ajax调用时，ajaxStart被触发，但它不显示qloader，它会等到ajaxStop被触发，然后眨眼间它显示qloader并隐藏它。

我怀疑 ajaxStart 没有执行，所以我在 $("#qloader").show() 之前放置了警报，然后将显示警报，之后将显示 qloader 但旋转动画将暂停 - 不旋转，在ajaxStop之后它将被隐藏。

如果 ajaxStart 触发器中没有警报，则在后续的 ajax 调用中，直到触发 ajaxStop 之前，div 才会显示。

对于第一个 ajax 调用，它工作正常，但对于单击表单按钮触发的后续 ajax 调用，它不起作用。

知道这个设置有什么问题吗？

Answer 1

在下面的链接中，有一个示例在加载时获取数据并在单击按钮时获取数据。这工作正常。

在您的代码中，如果按钮未键入提交，则单击按钮时不需要“返回 false”

$(document).ajaxStart(function() {
  $("#qloader").show();
}).ajaxStop(function() {
  $("#qloader").hide('slow');
});
$(document).ready(function() {
  getData();
})

.myLoader{
    width:100%;
    height:500px;
    background-color:blue;
    opacity:0.5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>

  <button type="button" class="btn" onclick="getData(); return false;">Show Data</button>
</form>
<div id="qloader" class="myLoader" style="display:none">Loading...</div>
<script>
  function getData() {
    $.post("/echo/json", {
      "json": JSON.stringify({
        "test": "test"
      })
    });
  }
</script>

.