时间戳

首页 > 解决方案 > 通过 Ajax 的实时 php 脚本执行进度

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

问题描述

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

该解决方案工作一半，因为我无法解决两个错误：

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

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

反而

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

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

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

$('#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);

标签： javascriptphpjquery

解决方案

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

$('#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);
    }
  });

});

推荐阅读