在 $.ajax 调用上创建进度条答案

【问题标题】：Create a progress bar on $.ajax call在 $.ajax 调用上创建进度条
【发布时间】：2012-09-28 10:12:25
【问题描述】：

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

我想在发出 ajax 请求时显示进度加载器。我在互联网上寻找并找不到简单的解决方案。我所能找到的只是复杂的上传文件脚本，这些脚本需要很长时间才能自定义以执行这个简单的操作。如果有人可以提供帮助，那就太好了。否则，我将不得不使用微调器。

【问题讨论】：

如果您有 1 个返回数据的请求，如何创建进度条？如果您有多个请求，并且每个请求都为您提供了有关已加载数据总百分比的状态更新，则可以创建一个进度条。您可以做的是创建一个微调器，一旦加载数据就会消失。
可以操纵请求的数量。我所寻找的只是朝着正确方向迈出的一步。
这个操作一点也不简单 - 要获得当前进度，您的 php 脚本需要设置一个（会话）变量，其中包含已完成工作的百分比，您需要通过 ajax 不断轮询并相应地更新您的进度显示。所以至少你需要另一个 php 脚本（用于轮询进度的后端）、一个 ajax 访问器以及一个用于显示和更新进度条的脚本。
您无法知道请求需要多长时间。这取决于请求速度、加载速度等。Arun David 的选项是最好的选项。
@amit redips.net/javascript/ajax-progress-bar 我觉得是这个意思

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

【讨论】：

我在这段代码中看到的问题是，只要一个名为 start_session 的不同脚本具有相同的会话 ID，并且在 Chrome 中你不能同时进行 2 个 ajax 调用，那么 start_session 就会阻塞，chrome 会等到第一个完成然后进入下一个
不知道 Chrome 的事情（为什么他们不允许并行请求？），但我认为 php 会话块在 apache 中不是问题，我错了吗？您也可以在设置会话变量之前和之后立即使用 start_session 和 session_write_close，这应该会取消阻止会话。
我们上次在我们的服务器上遇到了运行 Apache 的问题，所以我认为它仍然存在，但 session_write_close 应该修复它，是的，chrome 的东西是的，它很奇怪 :(
我可能错了（而且迟到了），但我认为使用 setTimeout 并在 ajax 函数成功时设置另一个超时是一个好主意，这样如果连接速度很慢，它就不会被延迟并且失事

【解决方案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>

【讨论】：

【解决方案3】：

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

这将是建议而不是答案。

我认为时间总是在 7-8 秒左右。

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

等待您的 ajax 请求完成后，在 ajax 成功回调时将条宽设为 100%。

您可以随时间自定义加载栏的百分比。

请查看demo

【讨论】：

即使使用占位符 gif 也比伪造它要好...这只有在处理时间恒定或几乎恒定的情况下才是一种选择，即使那样它也无法处理类似的事情网络尖峰等
@14mpi 我知道，我们的根本问题是您不知道请求需要多长时间。这只是一个建议。进度条的性能肯定取决于处理时间。但这将给出进度条的一般概念。
@EaterOfCorpses 是的，你是对的。我用你的小提琴示例进行了编辑。

【解决方案4】：

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

<div id="loading" >
<p>
<img src="images/loading.gif">
Please Wait
</p>
</div>

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

<script type='text/javascript'>
function showLoading() {
$("#loading").show();
}

function hideLoading() {
$("#loading").hide();
}

</script>

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

【讨论】：

【解决方案5】：

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

<div id='loading' style='display:none;'><img src='loading.gif' /></div>

ajax请求调用时，显示div

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

响应成功后，再次隐藏div，

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

【讨论】：