如何使用jQuery或Ajax在循环迭代过程中实时显示每一步返回结果

这个需求完全可以实现，核心是需要让PHP在循环迭代时就把内容输出给前端，而不是等到整个脚本执行完成后再统一返回响应，同时前端要支持流式读取响应内容，以下是两种可直接落地的实现方案：

方案1：HTTP分块传输 + 前端流式读取Ajax响应 #

该方案对现有代码改动最小，适配你给出的循环输出场景：

PHP端改造 #

默认PHP会启用输出缓冲区缓存所有内容，需要手动关闭缓冲区强制实时输出，代码如下：

<?php
// 关闭已有的输出缓冲区
if (ob_get_level()) ob_end_clean();
// 禁用输出缓冲和压缩
ini_set('output_buffering', 'off');
ini_set('zlib.output_compression', false);
// 设置分块传输必要头信息
header('Transfer-Encoding: chunked');
header('Content-Type: text/html');
header('Cache-Control: no-cache');

for ($i = 0; $i < 1000; $i++) {
    $content = $i . '<br>';
    // 按HTTP分块传输格式输出：先输出内容长度（16进制），再输出内容
    echo dechex(strlen($content)) . "\r\n" . $content . "\r\n";
    // 强制刷新缓冲区把内容推给前端
    ob_flush();
    flush();
    // 可选：加0.1秒延迟方便观察实时输出效果，实际业务可删除
    usleep(100000);
}
// 输出分块传输结束标记
echo "0\r\n\r\n";
?>

*注意：如果你使用Nginx作为Web服务器，需要在对应站点配置的location块中添加proxy_buffering off;关闭代理缓冲，本地用PHP内置开发服务器无需额外配置。

前端jQuery实现 #

通过监听XMLHttpRequest的进度事件，每次有新内容返回就读取新增部分追加到页面：

<!-- 页面上放一个展示结果的容器 -->
<div id="result"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script>
// 记录上一次读取到的响应内容位置
let lastReadIndex = 0;
$.ajax({
    url: '替换为你的PHP接口地址',
    method: 'GET',
    xhr: function() {
        const xhr = new XMLHttpRequest();
        // 监听响应更新事件
        xhr.onprogress = function() {
            // 截取上次读取之后新增的内容
            const newContent = xhr.responseText.slice(lastReadIndex);
            lastReadIndex = xhr.responseText.length;
            // 追加到页面
            $('#result').append(newContent);
        };
        return xhr;
    },
    success: function() {
        $('#result').append('<br>✅ 全部迭代完成');
    }
});
</script>

方案2：使用Server-Sent Events(SSE) #

如果是更复杂的实时推送场景更推荐该方案，它是HTML5原生提供的服务端单向推送API，封装了断连重连、消息解析逻辑，代码更稳定简洁。

PHP端代码 #

<?php
// 设置SSE必要头信息
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

if (ob_get_level()) ob_end_clean();
ini_set('output_buffering', 'off');
ini_set('zlib.output_compression', false);

for ($i = 0; $i < 1000; $i++) {
    // SSE固定消息格式：data: 开头，\n\n结尾
    echo "data: {$i}\n\n";
    ob_flush();
    flush();
    usleep(100000);
}

前端代码 #

<div id="result"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script>
const eventSource = new EventSource('替换为你的PHP接口地址');
// 监听服务端推送的消息
eventSource.onmessage = function(e) {
    $('#result').append(e.data + '<br>');
    // 迭代完成后关闭连接
    if (e.data === '999') {
        eventSource.close();
        $('#result').append('<br>✅ 全部迭代完成');
    }
};
</script>

内容的提问来源于stack exchange，提问作者Hannah James