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的答案作为起点）。现在，在执行主$.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

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

Answer 5

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

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

当调用ajax请求时，显示div

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

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

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

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

5 个答案: