AJAX , Javascript 显示脚本运行的进度

Question

在搜索此问题时，我浏览了许多其他链接。我没有得到任何特别的答案。我有 php 脚本可以将 50,000 多个数据插入数据库。我通过 ajax 函数调用了脚本。我想跟踪脚本的进度并将其显示在进度条上。请帮我解决一些代码 sn-p 。谢谢

Answer 1

根据由 AJAX 请求启动的脚本第一次插入之前数据库中的内容，有两种方法可以执行此操作。一种方法是在某个数据库表中添加一个额外的条目，即每次更改一个条目时从 PHP 脚本获得的完成百分比。
这是将数据放入数据库的脚本。

$array = array(/*50,000 entries here from the ajax request*/);
$counter = 0;
foreach($array as $entry){
    // do the insertion in the database
    $percentage = $counter / count($array);
    // insert $percentage in the database in another table
}

然后您可以向脚本发出另一个 AJAX 请求，该脚本返回数据库字段的值，该字段存储每（十分之一）秒计算的百分比。

如果在发出请求之前数据库为空，则必须计算在发出 AJAX 请求之前将插入多少条目并将其保存在 JS 中的变量中。
然后你可以每隔（十）秒发出另一个 AJAX 请求，php 应该只计算表中的数据库条目，将其传递给 JS，JS 计算百分比。

Answer 2

我不会阻止 UI 是使用 SESSION 变量跟踪数据库中的进度或写入数据库中的日志文件或表。会话更好，因为您不需要跟踪并发和竞争条件。

然后从浏览器每秒或您决定读取 SESSION 变量并更新进度条的时间进行一次 AJAX 调用。

当完成主进程的原始 AJAX 调用完成时，您会完成进度条和/或向用户显示完成消息。

Answer 3

这是显示进度的示例。 '#progressBar' 是引导进度条的 id

$.ajax({
            xhr:function(){
                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + "%").text(percent + "%");
                            if (percent == 100)
                            {
                                complete = 1;
                            }
                        }
                    });
                    return xhr;
                },
            type:'POST',
            url: '',
            success:function(response) {
            //success code....
            }
     });