6

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

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

4

5 回答 5

3

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

编辑您通过调用的 php 脚本$.ajax来计算它已完成的工作百分比 - 您将如何执行此操作非常依赖于脚本执行的操作，因此非常容易（例如，当您只是迭代一个要处理的事情的数组，每个事情都需要大约相同的时间）或非常困难（例如，当大部分时间都花在对库或内置函数的一次非重复调用上时）。将此百分比保存在会话变量中：

$_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重复查询服务器，直到任务完成。

于 2012-09-28T12:26:03.840 回答
0

请尝试以下 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>
于 2012-11-15T07:17:46.420 回答
-2

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

这将是建议而不是答案。

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

每秒加载 10%，直到达到 90%。

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

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

请查看此演示

于 2012-09-28T11:07:28.113 回答
-5

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

<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 函数。它将显示和隐藏动画。

于 2012-09-28T10:25:58.147 回答
-7

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

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

当调用ajax请求时，显示div

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

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

$('#loading').hide();
于 2012-09-28T10:16:16.863 回答