ajax 如何使用 ajaxStart 显示加载微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31199304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use ajaxStart to show loading spinner?
提问by Max
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.
我有一个使用 shell_exec 命令运行 python 脚本的网页。我想要一个加载微调器，“请稍候此页面加载”这样的消息，在 python 脚本运行时显示，然后在它完成后显示其余的 echo'd HTML。
I found what seems like a good solution at https://stackoverflow.com/a/68503/4630491but I am so new to ajax that I don't know how to use the solution. I tried doing
我在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>
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?
但这不起作用。我是否需要调用 ajax 来执行 ajaxStart？我该怎么称呼它？我应该将 shell_exec 包装在 ajax 代码中吗？
Thanks a bunch.
谢谢一堆。
回答by Manohar Gunturu
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.
每当要发送 Ajax 请求时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。如果没有正在进行，jQuery 将触发 ajaxStart 事件。
Have a loading gif image like shown below
有一个如下所示的加载 gif 图像
<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).
首先隐藏这个加载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>
For more see at jQuery documentation
有关更多信息，请参阅jQuery 文档
Do I need to call ajax to execute the ajaxStart? How would I call it?
我是否需要调用 ajax 来执行 ajaxStart？我该怎么称呼它？
Yes when you triggered a ajax request then only ajaxStart will get triggered automatically.
是的，当您触发 ajax 请求时，只有 ajaxStart 会自动触发。
For ajax there are multiple ways with jquery, below I am giving with load function.
对于ajax，jquery有多种方式，下面我给出了加载功能。
$( ".result" ).load( "some_file.py" );
some_file.py output will inserted into div with class name result.
some_file.py 输出将插入到带有类名结果的 div 中。
To trigger the load event you can use button click or any other as need.
要触发加载事件，您可以根据需要使用按钮单击或任何其他操作。
$( ".trigger" ).click(function() {
$( ".result" ).load( "some_file.py" );
});
