-1

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

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%第二部分等中，并根据该变量简单地显示进度条。我唯一不知道的是如何显示进度条？

谢谢

4

3 回答 3

2

我推荐的解决方案：

为流程中的每个步骤创建单独的 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

于 2013-09-23T16:53:39.773 回答
1

您可以使用 HTML5 进度条。

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

<progress id='p' max="100" value="50"></progress>
于 2013-09-23T17:00:31.867 回答
1

最佳实践是将进度值存储在 db 或 APC、Memcache 或 Redis 等键值存储系统中。然后使用 ajax 查询检索进度。

一个好的 jquery 插件是来自 jQuery-ui 的进度条，你可以使用 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>
于 2013-09-23T16:59:29.840 回答