jquery ajaxstart ajaxstop 显示隐藏答案

【问题标题】：jquery ajaxstart ajaxstop show hidejquery ajaxstart ajaxstop 显示隐藏
【发布时间】：2012-08-23 03:33:21
【问题描述】：

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

在 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 没有执行，所以我把 alert 放在 $("#qloader").show() 之前，然后会显示 alert，之后会显示 qloader 但微调器动画会暂停 - 不会旋转，在 ajaxStop 之后它会被隐藏起来。

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

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

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

【问题讨论】：

我们能看到getData()的代码吗？
在 getData() 中只是对数据的 ajax 调用。但是，我发现，如果我完全删除 ajaxStart 和 ajaxStop 代码和 ajax 调用，并且如果在 on.click 事件中我调用 $('#qloader').show() 然后等待几秒钟，然后再调用 $('# qloader').hide 再次不显示 qloader div。似乎它与 ajax 无关（顺便说一句，它执行得很好）。我会尽快准备完整的版本供您在线查看，以便您自己检查。
试试这个jsfiddle.net/FuFHe/2 看看我的意思

标签： jquery spinner show-hide

【解决方案1】：

您的按钮单击事件处理程序不正确。 return false 不会阻止默认行为，这只是 jQuery 的事情。所以我愿意。

$('.btn').on( "click" , function( event ){
   getData();
   return false;
});

这是一个工作示例。 http://jsfiddle.net/FuFHe/

【讨论】：

"return false 不会阻止默认行为，这只是 jQuery 的事情。"这是完全不真实的。
stackoverflow.com/questions/1357118/…, stackoverflow.com/questions/4924036/…
我试过这个，它可以工作，除了，表单被提交，它不应该。
我的错误，表单没有提交，但问题仍然存在。我会进行更多测试并得到结果。
不走运，这并不能解决问题。这些是控制台日志行：START test:17 Element display: block test:17 Element z-index: 10 test:17 STOP test:17 START test:17 Element display: block test:17 Element z-index: 10 test:17 STOP 在第一次启动时显示加载程序，在第二次启动时显示设置为阻止加载程序但没有显示任何内容。

【解决方案2】：

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

在您的代码中，如果按钮未键入提交，则单击按钮不需要“返回 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>

【讨论】：

【解决方案3】：

正常睡眠将不起作用。请在下面尝试，它已经过测试并且可以 100% 运行。

$("#showData").click(function(event){
    $("#qloader").show();
    setTimeout(function(){
        //Do what the button normally does
        $("#qloader").hide('slow');
    }, 10000);          
});

干杯。

【讨论】：