加载脚本的AJAX进度条答案

【问题标题】：AJAX progress bar of load script加载脚本的AJAX进度条
【发布时间】：2018-01-20 15:58:34
【问题描述】：

在 AJAX 中制作进度条有一个大问题。整个页面都在 AJAX 中，其中一个网页是 AJAX，它加载一个函数来从数据库中获取一些大行。

我尝试在 foreach 循环中使用 flush() 方法并通过写入/读取 $_SESSION 来在此脚本中创建进度条，但仍然没有。我真的尝试了所有我不知道该怎么做的事情。只需要这个就可以完成我的项目。有人可以帮我解决这个问题吗？

无论如何我要加载哪个脚本，这个进度条的模板如何在 GET 或 POST ajax 中使用它，对于任何 AJAX。

<script>
    jQuery(document).ready(function($) {
            
            $(document).on('click','#save',function () {
                setTimeout(getProgress,1000);
              $(this).text('Pobieram analizę...');
              $.urlParam = function(name){
             var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
            }
        var id = $.urlParam('id');
        var idt = $.urlParam('idt');
                  $.ajax({
                                 url: "views/getresults.php?id="+id+"&idt="+idt,
                    success: function(data) {
                        $("#loadresults").append(data);
                    }
                });
                setTimeout(getProgress,3000);
            return false;
            });
            function getProgress(){
                
                $.ajax({
                    url: 'views/listen.php',
                    success: function(data) {
                        if(data<=100 && data>=0){
                            console.log(data);
                            $('#loadresults').html('<div id="progress"><div class="progress-bar" role="progressbar" style="width:'+ (data / 100)*100 +'%">'+ data + '/' +100+'</div></div>');
                            setTimeout(getProgress,1000);
                            console.log('Repeat');
                        } else {
                            $('#loadresults').text('Pobieram dane');
                            console.log('End');
                        }
                    }
                });
            }
        });
        </script>

这是一个getresults.php

    foreach($result as $resul) {
    $count++;
    session_start();
    $_SESSION['progress'] = $count;
    $_SESSION['total'] = 100;
    session_write_close();
    sleep(1);
}
unset($_SESSION['progress']);

还有一个获取进度的函数listen.php

<?php
session_start();
echo (!empty($_SESSION['progress']) ? $_SESSION['progress'] : '');

if (!empty($_SESSION['progress']) && $_SESSION['progress'] >= $_SESSION['total']) {
    unset($_SESSION['progress']);
}

?>

【问题讨论】：

你尝试了什么？
主要是这个会话方法，任何刷新和在 html5 中带有微调器的东西
我是 ajax 新手，我做了很多工作，但是这个进度条是......
请显示您的代码以便我们了解
另外一件事是我确切地知道 foreach 循环的所有计数结果的数量

标签： javascript php ajax

【解决方案1】：

写入和读取会话不起作用，因为 PHP 的标准行为是在执行主代码时锁定会话文件。

尝试创建一个文件并使用函数执行期间完成的百分比更新其内容。比如：

<?php
function slowFunction() {
    $file = uniqid();
    file_put_contents($file, 0);
    // Long while that makes your stuff
    // you have to know how many loops you will make to calculate the progress
    $total = 100;
    $done = 0;
    while($done < $total) {
        $done++;
        // You may want not to write to the file every time to minimize changes of being writing the file 
        // at the same time your ajax page is fetching it, i'll let it to you...
        $progress = $done / $total;
        file_put_contents($file, $progress);
    }
    unlink($file); // Remove your progress file
}

【讨论】：

所以它与会话相同，但使用文件是吗？
您能否将这段代码实现到我的代码中以便更好地理解？
对不起，当我看到你的问题时，没有代码。是的，它与会话相同，但使用文件。您的函数“getProgress”必须监听该文件，因此，您必须传递其名称而不是“listen.php”。
如何在我的 ajax 启动函数中得到这个？好的，在 foreach 循环中，我在文件中得到了这个添加数字，以及如何获得与听相同的数字？
在foreach循环中实现这个函数？

【解决方案2】：

无法从ajax获取数据下载进度。一旦您向服务器请求您，下一个响应将仅在获取数据之后或发生错误时。

您的解决方案是，以分数形式获取数据。比如先下载1/10的数据，在成功回调中，再次递归调用ajax请求2/10的数据。在每次成功回调时，您都可以更改进度条。

【讨论】：

【解决方案3】：

查看服务器端事件或长轮询选项

【讨论】：