基于Web的进度条从文件

时间:2016-06-21 20:38:46

标签: javascript php ajax web-deployment

用户点击发送按钮后,我有一个10分钟长的脚本运行调用php页面。我可以将脚本的进度输出到文件,但是如何在用户单击“发送”按钮后将其读回页面。我不想打开下一页或继续刷新当前页面。如何实现?

2 个答案:

答案 0 :(得分:1)

对于你想要实现的功能,你需要处理好几件事,所以让我们开始吧。

您需要一个调用10分钟漫长过程的按钮。你已经拥有它,所以让我们继续前进=)

如果你想留在同一个页面上,我会使用Javascript隐藏按钮,并将进度条显示为0%。如果您想要进入新页面,我会使用一个表单,在提交时,将我重定向到新页面。

无论哪种方式,如果您被重定向到新页面或者您已经停留,您需要跟踪谁调用了该过程。原因是当用户“敲门”询问状态时,您知道他们所指的是哪个过程。最简单的方法是将其存储在具有ID的数据库中,并跟踪事物。这个ID可以通过Javascript + AJAX(如果你留下)或服务器端响应(如果它是重定向)获得。

现在,您需要检查服务器脚本的状态。为此,您需要一个端点,它接收我们在上一步中生成的ID,并在调用时返回该进程的状态。你说你正在使用进度条,所以我也会在该通话中包含一个百分比。像example.com/my_process_status.php?process_id=10这样的端点返回类似{status:'not_done',百分比:15}的JSON

现在,使用Javascript,您可以使用AJAX调用端点来检查状态。如果状态显示它尚未就绪,您只需使用setTimeout()告诉代码在几秒钟内再次检查并更新进度条的百分比。

最后,当端点告诉您脚本已完成时,您将停止调用setTimeout()并以任何方式显示您已完成的任务(使用Javascript)。

我知道这是一项很多工作,但是当它全部放在一起时,事情就会很好地发挥作用。如果其中任何一项不够清楚,我将很乐意添加更多信息。

答案 1 :(得分:-2)

使用php作为" SEVER SIDE LANGUAGE",您需要使用AJAX或(AKA)JAVASCRIPT异步请求轮询服务器以获取信息,以避免重新加载页面...

 var I = setInterval( function(){
    $.post( 'serverurl', function(data){
           //update progress with what is in data.
     });
},5000 );

在PHP方面,您只需阅读文件

  $progress = file_get_contents( 'file.txt' ); //or what have you
  echo $progress;   //or json_encode( $progress ); if you need more then a simple sting.

相当简单。

购买方式,您可以通过使用变量I(在此示例中)达到100%后结束时间间隔,这样就可以毫无理由地消耗网络流量。

 clearInterval(I);

您还可以将Ajax请求对象存储在变量中并检查其状态,以确保您的轮询没有竞争条件,但这是另一天的帖子。对于这样的简单事情,返回可能只需要几秒钟,但这可能不值得。

如果你使用像NODE js这样的东西那么这是另一回事。