Question

通常看似简单的事情需要几天才能解决，也许有人可以指出我的解决方案，但是在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没有被执行，所以我在$（“＃qloader”）。show（）之前发出警报，然后会显示警告，之后显示qloader但是旋转动画将被暂停 - 没有旋转，并且在ajaxStop之后它会被隐藏。

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

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

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

Answer 1

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

在你的代码中＆＃34;返回false＆＃34;如果按钮不是类型提交，则不需要点击按钮

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

正常睡眠将不起作用。请尝试下面的方法，它已经过测试，并且可以100％工作。

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

干杯。

Answer 3

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

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

这是一个有效的例子。 http://jsfiddle.net/FuFHe/

jquery ajaxstart ajaxstop show hide

3 个答案: