通过 Ajax 的实时 php 脚本执行进度

Question

我正在尝试用 javascript 编写代码，该代码将运行带有 AJAX 请求的 PHP 脚本、动态下载其进度、显示进度条并返回当前消息。

解决方案中途因为我无法解决两个错误：

1. 反馈消息重复，显示：

设置... 设置...分析... 设置...分析...退出

相反

设置... 分析... 退出

1. 我无法计算出准确的进度条，因为使用 ob_flush() 和 flush() 时 e.total 为 0

值得一提的是，每次运行脚本时返回消息的数量会有所不同（动态），因此我无法像互联网上的示例那样计算总值。

$('#import').on('submit', function(e) {

  e.preventDefault();

  $.ajax({
    url: $(this).prop('action'),
    method: $(this).prop('method'),
    xhrFields: {
      onprogress: function(e) {
        $('#logs').append('<p>' + e.target.responseText + '</p>');
        $('progress').val((e.loaded / e.total) * 100);
      }
    },
    success: function(response) {
      console.log(response);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="import" method="POST" action="import.php">
  <div id="logs"></div>
  <progress max="100" value="0"></progress>
  <button type="submit">Run</button>
</form>

这是用于测试目的的 import.php 文件的内容：

echo 'Set up...';
ob_flush();
flush();
sleep(1);
    
echo 'Analyzing...';
ob_flush();
flush();
sleep(1);
    
echo 'Exit';
ob_flush();
flush();
sleep(1);

Answer 1

您可以将先前的响应保存在临时变量中。然后比较之前的响应是否与当前的响应相同。

$('#import').on('submit', function(e) {


  e.preventDefault();
  var previousResponse = ''

  $.ajax({
    url: $(this).prop('action'),
    method: $(this).prop('method'),
    xhrFields: {
      onprogress: function(e) {
        var response = e.target.responseText

        if(previousResponse !== response){
          $('#logs').append('<p>' + response + '</p>');
        }
        var previousResponse = response

        $('progress').val((e.loaded / e.total) * 100);
      }
    },
    success: function(response) {
      console.log(response);
    }
  });

});