Question

我有一个简单的安装程序，它分为不同的部分，而不是语法，而只是逻辑。以下是它的工作原理：

if ($_POST['install'] == "Install")
{
// fetches user values

// creates tables 

// creates some files 

// creates some emails

// inserts relevant stuff into the database

// finishes
}

此问题的代码太长且不必要。这些步骤中的每一步都是安装完成的20％，我如何制作向用户显示信息的进度条？我喜欢这个有两个原因，一个是让他们跟踪，另一个是让他们知道他们不应该在浏览器标签完成之前关闭它。

现在我的想法是为代码的每个部分分配一个变量，例如第一个中的$done = 20%，第二个中的$done = 40%等，并简单地显示基于该变量的进度条。我唯一不知道的是如何显示进度条？

由于

Answer 1

我推荐的解决方案：

为您的流程中的每个步骤创建单独的ajax请求，如此...

// do first step
$.ajax({
   url: myUrl + '?step=1',
   success: function() {
     // update progress bar 20%
   }
});

// do second step
$.ajax({
   url: myUrl + '?step=2',
   success: function() {
     // update progress bar 40%
   }
});

// etc.

如果你想要干，试试这个：

var steps = 5;

for (var i = 1; i <= steps; i++) {
    $.ajax({
       url: myUrl + '?step=' + i;
       success: function() {
         // update success incrementally
       }
    });
}

使用jQuery UI进度条：

$(function() {

    $("#progressbar").progressbar({
      value: 0
    });

    var steps = 5;

    for (var i = 1; i <= steps; i++) {
        $.ajax({
           url: myUrl + '?step=' + i;
           success: function() {
             // update success incrementally
             $("#progressbar").progressbar('value', i * 20);
           }
        });
    }

});

参考。 http://jqueryui.com/progressbar/#default

Answer 2

最佳做法是将进度值存储在db或键值存储系统（如APC，Memcache或Redis）中。然后使用ajax查询检索进度。

一个好的jquery插件是来自jQuery-ui的progressbar栏，您可以使用json对进度值进行编码：

// GET /ajax/get-status.json
{
    "progress":10,
    "error":"",
    "warning":""
}

页面：

<div id="error" style="color: red"></div>
<div id="warning" style="color: yellow"></div>
<div id="message"></div>
<div id="progressbar"></div>
<script type="text/javascript">   
        jQuery(document).ready(function() {
            $("#progressbar").progressbar({ value: 0 });
            $.ajaxSetup({ cache: false });

            function updateProgress() {
                jQuery.getJSON("/ajax/get-status.json", function(response) {

                    if (response.error) {
                        $("#error").html( response.error );
                        return;
                    } else {
                        $("#progressbar").progressbar( 'value', parseInt( response.progress ) ); // Add the new value to the progress bar
                        $("#message").html( response.message );
                        $("#warning").html( response.warning );
                        if(parseInt( response.progress ) < 100){
                            setTimeout(updateProgress, 1);
                        }
                    }
                  });
            }

            updateProgress();
        });           
</script>

Answer 3

您可以使用HTML5进度条。

发送ajax请求并返回完成百分比。更改进度标记的值。

<progress id='p' max="100" value="50"></progress>

安装进度条php

3 个答案: