jquery ajax启动ajax停止显示隐藏

iyr7buue 于 2023-03-07 发布在 jQuery

关注(0)|答案(4)|浏览(190)

通常看似简单的事情需要几天的时间来解决，也许有人可以给我一个解决方案，但两天后，我给予了以下问题;
在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的html div中，qloader被定义为具有100%的宽度和高度，并且微调器居中作为背景，z索引在其他之上：

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

现在，当页面加载时，执行 AJAX 调用以获取初始数据，qloader div被调出并显示旋转动画，ajax调用完成后，qloader被ajaxStop隐藏。
接下来，当我单击一个按钮（显示数据）来启动另一个 AJAX 调用时，ajaxStart被触发，但它不显示qloader，它一直等到ajaxStop被触发，然后眨眼间它显示qloader并隐藏它。
我怀疑ajaxStart没有执行，所以我把alert放在$（“#qloader”）.show（）之前，然后alert会显示，之后qloader会显示，但是spinner动画会暂停-没有旋转，在ajaxStop之后它会隐藏。
如果ajaxStart触发器中没有alert，则在后续ajax调用中，div直到触发ajaxStop之前才会显示。
它在第一 AJAX 调用时工作正常，但对于随后由单击表单按钮触发的ajax调用，它不工作。
你知道这个装置有什么问题吗？

jquery

来源：https://stackoverflow.com/questions/12162430/jquery-ajaxstart-ajaxstop-show-hide

4条答案

按热度按时间

uqzxnwby1#

在下面的链接中有一个例子，在加载时获取数据，并在点击按钮时获取数据。这是正常工作。
在您的代码"返回假"是不需要点击按钮，如果按钮不是类型提交

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

。

赞(0）回复(0）举报 2023-03-07

wko9yo5t2#

正常睡眠将无法工作。请尝试下面，它是测试和工作100%。

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

干杯。

赞(0）回复(0）举报 2023-03-07

eqqqjvef3#

您可以使用 AJAX 的beforeSend和complete方法

getData(){
  jQuery.ajax({
      type: "POST",
      url: 'Your url',
      data: 'your data',
      beforeSend: function () {
        $("#qloader").show();
      },
      success: function (a) {
        
      },
      complete: function () {
        $("#qloader").hide('slow');
      }
    });
}

赞(0）回复(0）举报 2023-03-07

dm7nw8vv4#

你的按钮点击事件处理器不正确。return false不会阻止默认行为，这只是一个jQuery的事情。

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

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

赞(0）回复(0）举报 2023-03-07

我来回答

jquery ajax启动ajax停止显示隐藏

4条答案

相关问题

热门标签

最新问答