如何使用ajaxStart显示加载微调器?

前端之家收集整理的这篇文章主要介绍了如何使用ajaxStart显示加载微调器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用命令 shell_exec运行 python脚本的网页.我想要一个加载微调器,’请等待这个页面加载’类型的消息,在python脚本运行时显示,然后在完成其余的回声HTML显示之后.

我在https://stackoverflow.com/a/68503/4630491找到了一个好的解决方
但我是ajax的新手,我不知道如何使用该解决方案.我试过了

<div id="loadingDiv">Please wait while this page loads.</div>
<script>var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
</script>

但这没用.我是否需要调用ajax来执行ajaxStart?我怎么称呼它?我应该在ajax代码中包装shell_exec吗?

谢谢一堆.

解决方法

每当要发送Ajax请求时,jQuery都会检查是否还有其他未完成的Ajax请求.如果没有进行,jQuery会触发ajaxStart事件.

有一个如下所示的加载gif图像

<div id="loading">
                <img src="loading.gif" />  
           </div>

首先隐藏此加载div(因为当ajax请求即将发送时必须显示加载图像).

<script>
                   var $loading = $('#loading').hide();
                   //Attach the event handler to any element
                   $(document)
                     .ajaxStart(function () {
                        //ajax request went so show the loading image
                         $loading.show();
                     })
                   .ajaxStop(function () {
                       //got response so hide the loading image
                        $loading.hide();
                    });
              </script>

欲了解更多,请参阅jQuery documentation

我是否需要调用ajax来执行ajaxStart?我怎么称呼它?

是的,当您触发ajax请求时,只会自动触发ajaxStart.

对于ajax,jquery有多种方式,下面我给出了load函数.

$( ".result" ).load( "some_file.py" );

some_file.py输出将插入到具有类名结果的div中.

要触发加载事件,您可以根据需要使用按钮单击或任何其他操作.

$( ".trigger" ).click(function() {
                  $( ".result" ).load( "some_file.py" );
               });

猜你在找的Ajax相关文章