在$.ajax调用时创建进度条

Question

当我单击一个按钮以通过ajax加载内容时，我想显示一个进度条。一旦我创建了$.ajax调用，通信就转到服务器上的一个php文件，该文件从服务器上的另一个文件中抓取数据。而且它需要7-8秒的时间来引入数据。

我希望在发出ajax请求时显示进度加载器。我在网上找，找不到一个简单的解决方案。所有我能找到的是复杂的上传文件脚本，这将需要一段可怕的时间来定制来执行这个简单的操作。如果有人能帮上忙，那就太好了。要不然我只能凑合着用旋转器了。

Answer 1

因为所有其他答案都是关于显示占位符图像或文本，或者只是伪造它，这里是如何做到这一点的(只是一个描述，没有代码-但唯一困难的部分是确定实际完成了多少工作)：

编辑你通过$.ajax调用的php脚本来计算它已经完成的工作的百分比--你怎么做取决于脚本所做的任务，因此可以是非常简单的(例如，当你只是迭代一组要处理的东西，每个东西都需要大约相同的时间)，或者非常困难(例如，当大多数时间都花在一个单一的，非重复的调用一个库或内置函数中)。将此百分比保存在会话变量中：

$_SESSION["PERCENTAGE_DONE"] = $my_calculated_percentage;

显然，您希望尽可能合理地经常更新此变量。

现在，创建另一个php脚本，它只输出这个值(对于本例来说，纯文本就足够了，但也可以使用json或xml或其他一些您喜欢的格式)：

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

对于javascript部分，创建另一个函数，该函数通过ajax调用新的php脚本，读取返回值并绘制/更新进度条(对于绘制部分，您可以将JustinJohns answer作为起点)。现在，在执行主$.ajax调用之后，将此函数与setTimeout一起使用，重复查询服务器，直到任务完成。

Answer 2

请尝试以下Ajax进度条脚本：

<script>
function submit_form_data(){
    $("#preview").html(''); 
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/> <br><p>Please wait for response.............</p>'); 
    $.post('getdata.php',function(data){$("#preview").html(data)}) }
</script>

<div id='preview'></div>

Answer 3

根本的问题是，您不知道请求将花费多长时间。

这将是建议而不是答案。

我假设时间总是在7-8秒左右。

以每秒10 %的速度前进，直到达到90 %。

完成之后，等待ajax请求完成，并在ajax的成功回调中使条宽达到100 %。

你可以自定义加载时间的百分比吧。

请检查此demo