在$ .ajax调用上创建一个进度条

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

我想在发出ajax请求时显示进度加载器。我在网上看，无法找到一个简单的解决方案。我所能找到的只是复杂的上传文件脚本，这需要很长时间才能进行自定义以执行这个简单的操作。如果有人可以提供帮助，那就太好了。否则，我必须与旋转器一起做。

因为所有其他答案只是显示占位符图像或文本或只是伪造它，所以你可以这样做（只是一个描述，没有代码 – 但唯一困难的部分是确定实际完成了多少工作）：

编辑您通过$.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的答案作为起点）。现在，在执行主$.ajax调用之后，使用此函数和setTimeout重复查询服务器，直到任务完成。

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

根本问题是您不知道请求需要多长时间。

这将是建议而不是答案。

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

每秒加载10个百分点，直到达到90个百分点。

在等待你的ajax请求完成后，在成功回调ajax时使条宽100％。

您可以根据时间自定义加载条的百分比。

请检查此演示

您使用的图像应该加载动画图像。

    Please Wait

然后在脚本函数中使用以下代码

然后在ajax调用中调用showLoading和hideLoading函数。它将显示和隐藏动画。

正如你要求一个简单的解决方案，这可能会帮助你..有一个ID为“加载”的div，显示为隐藏。

当调用ajax请求时，显示div

 $('#loading').show();

当响应成功时，再次隐藏div，

 $('#loading').hide();