Question

我目前正在尝试让网页看起来更现代化，但我在向模态窗口添加一些相对简单的功能时遇到了一些麻烦。

在我的网页上，用户首先上传文件，然后在点击提交时，文件由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>
        ";
    }
?>

Answer 1

我会为你澄清这个流程，但是我不会给你代码，因为它写得太长了，我认为你最好首先理解你需要开发的理论。

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

你应该做的是使用ajax，所以你可以通过“ajax”运行你的php脚本（里面有你的shell脚本），再次使用ajax你可以在php脚本运行时询问进度。

所有这一切都应该有点简单，我知道，但问题是你在这里有各种复杂的东西：

您不能离开该页面。如果您使用multipart-form / data提交表单来上传文件，浏览器会启动上传，发出请求，当php脚本完成后，将重新加载整个页面。在那里你失去了对页面的控制权，你只需将控制权传递给浏览器。
您有2个需要时间并需要进度状态的进程：文件上载和脚本进程。但是让我们跳过第一个。
为避免在提交表单时离开页面，您需要通过ajax提交。这是link，了解如何操作。
要获得进展，您有两种方式：第一种是使用jQuery ajax progress via xhr，第二种是在javscript中“设置一个间隔”来检查每个{x时间}（即：每3秒）进度通过ajax，当进程完成时，清除该间隔以停止检查。你可以通过执行ajax请求来检查你有一个脚本返回进度的路径（它可以是一个php文件 - ＆gt;即：www.yourhost.com/your_action/progress.php）。
当脚本运行时，您需要在“用户全局上下文”（即：cookie，具有用户ID的文件，某些缓存等）上保存进度，因此当您“检查进度”时（步骤4），您将发出请求并要求任何请求可以访问该用户数据的值。或者只使用“通过xhr进行jQuery ajax progress”，阅读文档并使其以这种方式工作：）
完成您的流程后，只需停止显示或询问进度，显示链接或结果，您无需重新加载页面！

希望这有帮助，如果您有任何其他具体问题，请问：）

在模态窗口

1 个答案: