jquery ajaxstart ajaxstop show hide
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery ajaxstart ajaxstop show hide相关的知识,希望对你有一定的参考价值。
通常看似简单的事情需要几天才能解决,也许有人可以指出我的解决方案但是在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" > </div>
现在,当页面加载时,执行ajax调用以获取初始数据,启动加载器div并显示微调器 - 动画,在ajax调用完成后,qdloader被ajaxStop隐藏。
接下来,当我点击一个按钮(显示数据)以启动另一个ajax调用时,会触发ajaxStart,但它不显示qloader,它等待直到ajaxStop被触发,然后眨眼间它显示qloader并隐藏它。
我怀疑ajaxStart没有被执行,所以我在$(“#qloader”)。show()之前发出警报,然后显示警告,之后显示qloader但是旋转动画将被暂停 - 没有旋转,并且在ajaxStop之后它会被隐藏起来。
在ajaxStart触发器中没有警报,在随后的ajax调用div中,直到ajaxStop被触发之前才显示div。
它适用于第一个ajax调用,但对于通过单击表单按钮触发的后续ajax调用,它不起作用。
知道这个设置有什么问题吗?
在下面的链接中有一个示例获取加载数据并在单击按钮时获取数据。这工作正常。
在您的代码中,如果按钮不是类型提交,则单击按钮不需要“返回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>
您的按钮单击事件处理程序不正确。 return false
不会阻止默认行为,这只是一个jQuery的事情。所以我会这样做。
$('.btn').on( "click" , function( event ){
getData();
return false;
});
这是一个有效的例子。 http://jsfiddle.net/FuFHe/
以上是关于jquery ajaxstart ajaxstop show hide的主要内容,如果未能解决你的问题,请参考以下文章
为特定请求禁用 ajaxStart() 和 ajaxStop()
1.(ajaxStart 和 ajaxSend)和 2.(ajaxStop 和 ajaxComplete)有啥区别?