如何使用ajaxStart显示加载微调器? [英] How to use ajaxStart to show loading spinner?

问题描述

我有一个网页，该网页使用命令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文档

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

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

对于ajax，jquery有多种方式，下面是我给load函数提供的方法.

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

some_file.py输出将插入类名称为result的div中.

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

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

I have a webpage that runs a python script with the command shell_exec. I'd like for a loading spinner, the 'Please wait while this page loads' sort of message, to show while the python script is running, then after it is done for the rest of the echo'd HTML to show.

I found what seems like a good solution at https://stackoverflow.com/a/68503/4630491 but I am so new to ajax that I don't know how to use the solution. I tried doing

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

but this did not work. Do I need to call ajax to execute the ajaxStart? How would I call it? Should I wrap the shell_exec in ajax code?

Thanks a bunch.

解决方案

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event.

Have a loading gif image like shown below

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

First hide this loading div(because loading image have to be shown when ajax request is about to sent).

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

For more see at jQuery documentation

Do I need to call ajax to execute the ajaxStart? How would I call it?

Yes when you triggered a ajax request then only ajaxStart will get triggered automatically.

For ajax there are multiple ways with jquery, below I am giving with load function.

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

some_file.py output will inserted into div with class name result.

To trigger the load event you can use button click or any other as need.

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

这篇关于如何使用ajaxStart显示加载微调器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！