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 调用中，直到触发 ajaxStop 之前才会显示 div。

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

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

4

3 回答 3

0

正常睡眠是不行的。请在下面尝试，它已经过测试并且可以 100% 工作。

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

干杯。

于 2020-06-29T20:34:23.827 回答
0

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

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

.

于 2017-02-16T12:12:07.563 回答
-1

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

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

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

于 2012-08-28T15:36:45.790 回答