PHP中的Bootstrap进度条

Question

我有一个包含一些 html 和 php 的网页。php是用来执行一些linux命令的。我想在我的网页中放置一个引导进度条，当执行下一个 Linux 命令时，该进度条会继续前进。

假设我执行了 4 个 Linux 命令，每次执行完一个命令，进度条应该前进 25%。

我在网上搜索过，但找不到任何我需要的东西。有什么建议么？

到目前为止只得到了 php/html 部分：

function progressbarStatus($width) {

    echo "
            <div class = 'container'>

                    <div class = 'progress progress-striped active'>

                            <div class = 'progress-bar' role = 'progressbar' aria-valuenow = '$width' aria-valuemin = '0' aria-valuemax = '100'style = 'width: $width%'></div>

                            </div>

                    </div>

            </div>
            ";

}

Answer 1

一种实现此目的的方法，并通过 jQuery 以非常简单的格式进行了演示；

您将向包含该命令的 PHP 页面发送一个 AJAX 请求，PHP 页面将返回 a json_encode(array('success'=>true));，当收到并接受该请求时，进度条会更新，并且下一个函数将开始加载。

我还没有对此进行测试，它非常粗糙，但它（以简单的方式）向您展示了一种可以使用的技术。

$.getJSON('linkToLinuxCommand1.php').done(function(data) {
    if (data.success === true) {
        $('.progress').css('width', '25%');
        $.getJSON('linkToLinuxCommand2.php').done(function(data) {
            if (data.success === true) {
                $('.progress').css('width', '50%');
                $.getJSON('linkToLinuxCommand3.php').done(function(data) {
                    if (data.success === true) {
                        $('.progress').css('width', '75%');
                        $.getJSON('linkToLinuxCommand4.php').done(function(data) {
                            if (data.success === true) {
                                $('.progress').css('width', '100%');
                                alert('Done!');
                            }
                        });
                    }
                });
            }
        });
    }
});

一些评论；

• 只要Linux命令不与PHP对话，你就只能获取donePHP页面的状态
• getJSON也许您需要向请求添加更多参数
• 我不确定 JSON 是否返回布尔值true或false，所以也许您需要像字符串一样检查；data.success === "true"
• 继续检查data返回的内容（在设置 PHP 页面返回 JSON 之后），使用console.log(data)
• 您可能希望将这些函数绑定到触发器，例如$('#button').click(function() {/* PLACE HERE */});将所有内容放入递归函数中