javascript - 在 <div> 中每 5 秒显示 PHP 变量作为进度条数据

标签 javascript php jquery

我编写了一个 php 脚本,用于上传 CSV 文件、解析它们并将数据更新到 SQL 数据库中。现在这部分已经完成,我发现这个处理需要很多时间,我想添加一个进度条来监控这个过程。

遗憾的是,我发现我应该从一开始就从主页进行某种 jQuery/JSON 调用,这样我就会在更新后返回值。

为了不更改整个代码,我试图通过调用一个 javascript 函数来检索进度,该函数将每 5 秒打印一次 php 值。可以想象,它根本不起作用。如果我没记错的话,大约从 2012 年开始,在 php 代码中,任务运行时不会发送回显,即使使用 flush(); ob_flush();等等 有没有可能的解决方法? 谢谢

主页代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<script src="../../src/jquery-1.9.1.js"></script>
<script src="../../src/jquery-ui.js"></script>
<script>

$(document).ready(function () {
    $('.box').css({ 'display': 'none'});
    function updb(){
            var progress = '<?= $progress;?>';
            $('.progress-bar').css('width',progress+'%');
            $('.progress-bar').text(progress+'%');
    }
    $("#planningupload").submit(function(){ 
            $('.box').removeAttr('style');
            $('.progress-bar').text('0%');
            setInterval(function(){
                updb() // this will run after every 5 seconds
            }, 5000);
    });
});
</script>
</head>
<body>
<div id="container">
<h1>CSVParser</h1> 
<form action="#" id="csvparser" method="post" enctype="multipart/form-data">
<p>Select csv filetype:</p>
  <input type="radio" name="plantype" value="fa" required> FA<br>
  <input type="radio" name="plantype" value="pi"> Pi<br><br>
<p>Select a planning to upload:</p>
<input type="file" name="csvfile" size="40" />
<input type="hidden" name="upload">
<br />
<input type="submit" class="button" id="upload" name="upload" value="upload" />
</form>
</div>
<div class="box">
 <div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%"> 0% </div>
 </div>
</div>
<?php
if (isset($_POST["upload"])) { 
 $uploaddir = 'csv/';
 if ($_POST["plantype"]==="fa") $filename = $uploaddir . 'latestfa.csv';
 if ($_POST["plantype"]==="pi") $filename = $uploaddir . 'latestpi.csv';

...
 $progress = number_format((($k/$amount)*100), 2, '.', '');
}
?>

</html>

更新 1: 根据您的建议,我对代码进行了以下修改并创建了一个 status.php 页面,该页面应实时返回进度。可悲的是,我仍然在任务结束时更新值。有什么方法可以实时获取值吗? 仅供引用 session_start();已添加到每个 php 文件的最顶部。

主要文件更改:

function updb(){

 $.ajax({
    url : 'status.php',
    dataType : 'json',
    success : function (data) {
       alert(data.progress); 
    },
    error : function () {
       alert("error");
    }
 })
}

...
 $progress = number_format((($k/$amount)*100), 2, '.', '');
 $_SESSION['progress'] = $progress;

status.php 文件:

<?php
session_start();
if (isset($_SESSION['progress'])){
     echo json_encode($_SESSION);
 } else {
    echo "none%";
 }
?>

最佳答案

问题是,每次您请求页面时,PHP 变量都会被修复。 要在客户端将 PHP 变量转换为 Javascript,您必须使用 XMLHttpRequest (Ajax)。

为此,您可以创建一个计算进度的小脚本(并且与您分开

此示例工作流程如下:

  1. 客户提交 CSV 文件。
  2. 服务器将客户端发送到等待页面。
  3. 客户端每 5 秒 ping 服务器一次(使用 Ajax)以获取进度。
  4. 服务器响应进度。

由于您将数据放入 SQL 数据库,并且您知道正在处理的文件数量,因此您可以使用它来生成进度百分比。

在新脚本中,检查数据库以查看有多少文件已被处理。将其转换为百分比,将结果发送给客户端,瞧,进度条数据源。

关于javascript - 在 <div> 中每 5 秒显示 PHP 变量作为进度条数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36720785/

相关文章:

javascript - 特定位置上的 Window.location.reload()

php - Laravel 中使用 ajax 时出现错误 422 无法处理的实体

javascript - 如何在元素的类定义列表中选择第一个类

javascript/jquery 抓取部分 URL

javascript - 用于跟踪单个页面的 2 个域的 Google Analytics 代码

javascript - 比较 3 个数组以生成一个新字符串

php - SagePay 服务器集成验证签名

php - 使用连接比较sql查询中的两个表

javascript - jQuery 日期选择器,自定义填充所选日期

javascript - 尽管 CSS 相同,但我网站上的一个 div 比另一个高。为什么?