PHP页面分段加载需求：通过Ajax实现表格分批渲染解决504超时问题

嘿，这个分段加载的需求我之前也遇到过，正好可以给你一套完整的解决方案，把一次性生成100行的逻辑拆成Ajax分段请求，完美解决504超时的问题。咱们分后端和前端两部分来改：

核心就是把原来一次性生成100行表格的逻辑拆成分页接口，每次只生成5行的HTML片段；前端页面初始化时先加载前5行，然后通过按钮触发Ajax请求下一页，直到所有行加载完成。这样单次请求的执行时间会大幅缩短，彻底避免504超时。

首先新增一个load_table_rows.php文件，作为专门的接口来处理分段加载请求：

<?php
include 'functions.php';

// 获取前端传入的偏移量（已经加载了多少行），默认从0开始
$offset = isset($_GET['offset']) ? intval($_GET['offset']) : 0;
$rows_per_load = 5;
$total_rows = 100;

// 计算当前要生成的行范围，避免超出总条数
$start = $offset;
$end = min($offset + $rows_per_load, $total_rows);

$html_fragment = '';
// 循环生成对应行的HTML
for ($i = $start; $i < $end; $i++) {
    // 这里替换成你实际的函数调用逻辑，参数根据行号动态生成即可
    // 比如原来你是按行号给函数传参，这里保持一致就行
    $cell_content_1 = A($i * 2, $i + 1);
    $cell_content_2 = B($i - 1, $i * 3);
    $cell_content_3 = C($i + 5, $i / 2);
    $cell_content_4 = D($i + 10, $i - 3);
    
    // 拼接当前行的HTML
    $html_fragment .= "<tr>
        <td>{$cell_content_1}</td>
        <td>{$cell_content_2}</td>
        <td>{$cell_content_3}</td>
        <td>{$cell_content_4}</td>
    </tr>";
}

// 直接返回HTML片段给前端
echo $html_fragment;
?>

修改你的index.php，改成初始加载+按钮触发的模式，这里提供两种实现方式，选你顺手的来：

方式一：用jQuery简化Ajax（推荐，代码更简洁） #

<!DOCTYPE html>
<html>
<head>
    <title>分段加载表格</title>
    <!-- 引入jQuery，也可以用本地文件 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <table id="data-table" border="1" cellpadding="8">
        <!-- 初始行会通过Ajax加载 -->
    </table>
    <button id="load-more-btn" style="margin-top:15px;padding:8px 16px;">加载下5行</button>

    <script>
        let currentOffset = 0;
        const rowsPerLoad = 5;
        const totalRows = 100;

        // 页面加载完成后先加载第一页
        loadNextRows(currentOffset);

        // 绑定按钮点击事件
        $('#load-more-btn').click(function() {
            currentOffset += rowsPerLoad;
            // 已经加载完所有行的话，禁用按钮
            if (currentOffset >= totalRows) {
                $(this).text('已加载全部').prop('disabled', true);
                return;
            }
            loadNextRows(currentOffset);
        });

        // 发送Ajax请求加载行的核心函数
        function loadNextRows(offset) {
            const $btn = $('#load-more-btn');
            $btn.text('加载中...').prop('disabled', true);

            $.ajax({
                url: 'load_table_rows.php',
                type: 'GET',
                data: { offset: offset },
                success: function(html) {
                    // 把新行追加到表格里
                    $('#data-table').append(html);
                    $btn.text('加载下5行').prop('disabled', false);

                    // 检查是否加载完成
                    if (offset + rowsPerLoad >= totalRows) {
                        $btn.text('已加载全部').prop('disabled', true);
                    }
                },
                error: function() {
                    alert('加载失败，请重试');
                    $btn.text('加载下5行').prop('disabled', false);
                    // 加载失败回滚偏移量，避免下次请求出错
                    currentOffset -= rowsPerLoad;
                }
            });
        }
    </script>
</body>
</html>

方式二：原生JS实现（无需依赖jQuery） #

如果不想用jQuery，用原生fetch API也能实现：

// 替换上面的<script>部分即可
<script>
    let currentOffset = 0;
    const rowsPerLoad = 5;
    const totalRows = 100;
    const table = document.getElementById('data-table');
    const loadBtn = document.getElementById('load-more-btn');

    // 初始加载
    loadNextRows(currentOffset);

    loadBtn.addEventListener('click', function() {
        currentOffset += rowsPerLoad;
        if (currentOffset >= totalRows) {
            this.textContent = '已加载全部';
            this.disabled = true;
            return;
        }
        loadNextRows(currentOffset);
    });

    function loadNextRows(offset) {
        loadBtn.textContent = '加载中...';
        loadBtn.disabled = true;

        fetch(`load_table_rows.php?offset=${offset}`)
            .then(response => response.text())
            .then(html => {
                table.innerHTML += html;
                loadBtn.textContent = '加载下5行';
                loadBtn.disabled = false;

                if (offset + rowsPerLoad >= totalRows) {
                    loadBtn.textContent = '已加载全部';
                    loadBtn.disabled = true;
                }
            })
            .catch(() => {
                alert('加载失败，请重试');
                loadBtn.textContent = '加载下5行';
                loadBtn.disabled = false;
                currentOffset -= rowsPerLoad;
            });
    }
</script>

• 函数参数一致性：确保分段加载时函数的参数和原来一次性生成的完全一致，比如原来你是按行号计算参数，这里循环的$i要和原来的行号对应上，不然内容会出错。
• 优化函数执行速度：如果单个函数执行还是很慢，建议优化函数本身（比如缓存重复计算的结果、用异步处理、优化数据库查询等），分段加载只是缓解超时，根源还是要优化函数性能。
• 服务器超时配置：如果还是偶尔出现超时，可以适当调整服务器的超时设置，比如Nginx的proxy_read_timeout、PHP的max_execution_time，不过分段加载后一般不需要。
• 用户体验优化：可以在按钮上显示当前加载进度，比如改成“已加载10/100行”，让用户更清楚进度。

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