创建于$就调用一个进度条 [英] Create a progress bar on $.ajax call

问题描述

我想显示一个进度条，当我点击一个按钮，通过Ajax来加载内容。 当我创建 $。阿贾克斯通话，通信进入到从服务器上的其他文件擦伤数据的服务器上的PHP文件。它需要一个好的7-8秒，使在该数据。

I want to display a progress bar when I click on a button to load content through ajax. As soon as I create the $.ajax call, the communication goes to a php file on the server which scrapes data from another file on the server. And it takes a good 7-8 seconds to bring in the data.

我想是使Ajax请求时显示进度装载机。我一直在寻找在互联网上，无法找到一个简单的解决方案。所有我能找到的是复杂的上传文件的脚本，这将需要一个可怕而定制来执行这个简单的操作。如果有人能帮忙，那简直太好了。否则我不得不凑合着用的微调。

I want to display a progress loader at the time of making the ajax request. I was looking on the internet and couldnt find a simple solution. All I could find were complex upload file scripts which would take an awful while to customize to perform this simple operation. If anybody can help, that'd be great. Else I'd have to make do with the spinner.

推荐答案

由于所有其他的答案都只是显示一个占位符图像或文字，或只是装病，这里是你如何能做到这一点（只是一个说明，没有$ C $ Ç - 但唯一困难的部分是确定实际上是如何工作的多少事）：

Because all other answers are just about showing a placeholder image or text or just faking it, here's how you could do it (just a description, no code - but the only hard part is determining how much of the work is actually done):

编辑您通过 $调用PHP脚本AJAX 来计算的工作已经完成的百分比 - 你会怎么做，这是非常dependend在脚本执行TAST正因为如此可以非常容易的（例如，当你只是迭代事情的过程，每次取大约在同一时间阵列）或极硬（例如，当大部分的时间都用在一个单一的，非重复调用库或内置函数）。保存这一比例在会话变量：

Edit the php script you call via $.ajax to calculate the percentage of work it has completed - how you would do this is extremely dependend on the tast the script does and as such can be extremely easy (for example, when you're just iterating over an array of things to process which each take about the same time) or extremely hard (e.g. when most of the time is spent in one single, non-repeating call to a library or built-in function). Save this percentage in a session variable:

$_SESSION["PERCENTAGE_DONE"] = $my_calculated_percentage;

显然，要经常更新这个变量是有可能的，合理的。

Obviously, you want to update this variable as often as is possible and reasonable.

现在，创建一个只打印出这个值的另一个PHP脚本（明文将足以在这个例子中，但你也可以使用JSON或XML或你喜欢的其他格式）：

Now, create another php script which just prints out this value (plaintext would be enough for this example, but you could also use json or xml or some other format you like):

//initialize session, set headers etc. before this
echo $_SESSION["PERCENTAGE_DONE"]

有关的JavaScript部分，创建另一个函数，通过AJAX调用新的PHP脚本，读取返回的值，并绘制/更新进度条（适用于绘图的一部分，您可以采取JustinJohns回答为起点）。现在，在你执行主 $。阿贾克斯调用，使用此功能与的setTimeout 反复查询服务器，直到任务完成

For the javascript part, create another function that calls the new php script via ajax, reads the returned value and draws / updates the progress bar (for the drawing part you could take JustinJohns answer as a starting point). Now, after you execute the main $.ajax call, use this function with setTimeout to query the server repeatedly until the task is finished.

这篇关于创建于$就调用一个进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！