Javascript 在模式窗口中显示运行进程的进度

我目前正试图让网页看起来更现代一点，但在模式窗口中添加一些相对简单的功能时遇到了一些问题

在我的网页上，用户首先上传一个文件，然后点击submit，该文件由shell脚本处理（根据文件大小，可能需要几秒钟到几分钟）

为了显示流程状态，我一直在使用php执行以下代码：

$cmd = "script.bash -i $input_file";

$PID = shell_exec($cmd . " >> $log 2>&1  & echo $!");

while(is_process_running($PID)){
   echo(" . ");
   ob_flush(); flush();
   sleep(3);
}

除了显示（未显示）的一些其他信息外，这只需每隔几秒钟打印一个“.”，以向用户指示进程正在运行。完成后，将出现一个下载链接，以便检索处理后的数据

我现在想做的是在模式窗口中加载此信息。我在创建模式窗口（使用boostrap和javascript）并向其添加下载功能方面没有问题，但我只能在通过php执行$cmd完成后才能这样做。我想做的是执行$cmd，加载模式窗口，然后查询流程状态并在模式窗口中显示某种指示器，最后在流程完成时创建下载链接。我相信这需要通过AJAX来实现，但我对如何实现有点困惑。下面是我的代码，更详细一些：

<?
    if($theaction == "run_script" and !$error_msg){
        $cmd = "script.bash -i $input_file";

        $PID = shell_exec($cmd . " >> $log 2>&1  & echo $!");

        while(is_process_running($PID)){ #ensure the process is compete before loading the html
            echo("");
            ob_flush(); flush();
            sleep(3);
        }

        echo "
            <script type=\"text/javascript\">
                $(function() { $(\"#myModalProcess\").modal('show') })
            </script>


            <div class=\"modal fade\" id=\"myModalProcess\" tabinex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
                <div class=\"modal-dialog\">
                    <div class=\"modal-content\">
                        <div class=\"modal-header\">
                            <h4><b>Process ID: $PID</b></h4>
                            <hr>
                            <p>Other stuff here</p>
                            <a type=\"button\" class=\"btn btn-primary\" href='".$_SERVER['PHP_SELF']."?theaction=download&workDir=$workDir&out_folder=$out_folder'>Download Results</a>
                        </div>
                    </div>
                </div>
            </div>
        ";
    }
?>

---

我将为您澄清流程，但我不会给您代码，因为编写时间太长了，我认为您最好首先需要理论来理解需要开发的内容

因此，第一个错误是在运行php脚本后试图执行javascript和html（模式）代码

您应该使用ajax，这样您就可以通过“ajax”运行php脚本（其中包含shell脚本），并且再次使用ajax，您可以在php脚本运行时询问进度

我知道，所有这些都应该有点简单，但问题是这里有一系列复杂的东西：

你不能离开这一页。如果您使用多部分表单/数据提交表单以上载文件，浏览器将启动上载并发出请求，当php脚本完成时，整个页面将重新加载。在这里，您失去了对页面的控制，您只需将控制传递给浏览器
您有两个需要时间和进度状态的过程：文件上载和脚本过程。但是让我们跳过第一个
为了避免在提交表单时离开页面，您需要通过ajax提交表单。下面是一个了解如何做到这一点的例子
要获得进度，有两种方法：第一种是使用，第二种是在javscript中“设置一个间隔”，通过ajax每隔{x time}（即：每3秒）检查一次进度，当流程完成时，清除该间隔以停止检查。您可以通过执行一个ajax请求来检查路径，其中有一个脚本返回进度（它可以是一个php文件->即：www.yourhost.com/your_action/progress.php）
当脚本运行时，您需要将进度保存在“用户全局上下文”（即：cookies、具有用户id的文件、一些缓存等）上，因此当您“检查进度”（步骤4）时，您将发出请求并请求任何请求都可以使用用户的数据访问的值。或者只需使用“jQuery ajax progress via xhr”，阅读文档并以这种方式工作：）
流程完成后，只需停止显示或询问进度，显示链接或结果，就不需要重新加载页面
希望有此帮助，如果您有任何其他具体问题，请提问：）
什么是
进程运行吗
？抱歉，这只是一个返回进程状态的javascript函数。您不能使用phpThanks Yam调用js函数。我在理论方面很弱，所以非常感谢你澄清了正在发生的事情以及我需要做的事情。我会看看我能做些什么，如果我有什么困难，我会给你回复。当然，我认为你需要将代码在视图（html+js）逻辑和后端（php）逻辑之间分开，并尝试同时使用这两个函数->1。运行脚本2。获取进度状态。然后，您可以从视图逻辑提交文件并运行1。然后检查2。而1。他正在跑步。尝试编写代码，如果您有任何具体问题，我会帮助您：）