ajax - 如何使用 ajaxStart 显示加载微调器？

Question

我有一个使用 shell_exec 命令运行 python 脚本的网页。我想要一个加载微调器，“请稍候此页面加载”这样的消息，在 python 脚本运行时显示，然后在它完成后显示其余的 echo'd 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？我该怎么称呼它？我应该将 shell_exec 包装在 ajax 代码中吗？

谢谢一堆。

Answer 1

每当要发送 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有多种方式，下面我给出了加载功能。

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

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

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

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