AJAX分页后续页面无数据加载问题求助

核心问题分析 #

• 原script.js未发起AJAX请求获取后续页面数据，仅尝试隐藏/显示页面初始加载的元素，但初始渲染只生成了第一页内容，导致切换页面时无元素可显示。
• ajax-matches.php存在变量未定义错误：直接使用$param_line但未遍历$params数组，无法正确生成赛事数据。

分步修复 #

1. 重构script.js：实现AJAX请求逻辑 #

替换原script.js代码，添加AJAX请求逻辑，从ajax-matches.php获取对应页面数据并更新页面容器：

$(document).ready(function () {
    // 与PHP端保持一致的每页条目数
    var itemsPerPage = 2;

    // 通过AJAX获取并渲染指定页面数据
    function displayPage(page) {
        $.ajax({
            url: 'ajax-matches.php',
            type: 'GET',
            data: {
                page: page,
                items_per_page: itemsPerPage
            },
            success: function(response) {
                $('#matches-container').html(response);
            },
            error: function() {
                $('#matches-container').html('<p>加载数据失败，请稍后重试</p>');
            }
        });
    }

    // 初始加载第一页
    displayPage(1);

    // 处理分页点击事件
    $(document).on("click", ".pagination-link", function (e) {
        e.preventDefault();
        var page = parseInt($(this).attr("data-page"));
        displayPage(page);
    });
});

2. 修复ajax-matches.php：修正变量错误并完善内容生成 #

修复未遍历$params数组的问题，同时生成与首页一致的按钮+表格结构：

<?php
// 获取AJAX请求中的页码和每页条目数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$itemsPerPage = isset($_GET['items_per_page']) ? intval($_GET['items_per_page']) : 2; // 与前端保持一致

$games = "Netherlands - Eredivisie#Go Ahead Eagles|21:00|Fortuna Sittard|||% #Africa - CAF Champions League#Kedus Giorgis|01:00|Al Ahly|Ethiopia|Egypt|% #Africa - Africa Women Cup of Nations Qualification#Burundi Women|14:00|Ethiopia Women|Burundi|Ethiopia|% Central African Republic Women|15:00|Mali Women|Central African Republic|Mali|% Tunisia Women|15:00|Niger Women|Tunisia|Niger|% Congo DR Women|16:30|Benin Women|Congo DR|Benin|%";

$matches = str_replace("|% ", "|%", $games);

preg_match_all("@[A-z0-9 ./'áàâäãåǻăāąấấặắǎȧạàãáćĉċčççďđḑḋḍdéèêëĕěēęėềẽȩẹéĝğġģǧǵḡĥħȟḣḥḩíìîïĭїĩīįǐĪỊ̣iỊǏĨị̣ịıíĵķǩḱḳļľŀĺĺóòôöõðőŏōỏǒǫȯoøồớòóõöñńņňʼnŋǹṅṇŕŗřṙṛśŝşšṡṣşșţťŧțṫṭtúùûüůūűųũŭǔǘǚǜụuưüúŵŷýÿўỹẏỳỵyẙȳẙźżžẑẓḅḟḿṁṃṕṗṽṿḷẁẃẅẉẘẘẋẍÒÓÔÕÖŐǑǪŌȮØÙÚÛǓǗǙǛŨŮŰŲÜỤŪĆĈČÇÀÁÂÃÄÅẠĄĀȦǍÈÉÊËĖĘĚẸẼĒȨḾṀṂŚŜŞŠṠṢŹŻŽẐẒŃŅŇṄṆÑǸḢḤḨĤȞĹĻĽĿŢŤṪṬŖŘṘṚĜĠĢǦǴḠẀẂẄẈŴḊḌḐĎĐÐṔṖĶǨḰḲẊẌṼṾỴỸỲẎŸȲŶÝĴȷḄḞḶŁłÏÎÍÌıİßıs-]+#[^#]+@", $matches, $all_matches);

$results = [];
foreach ($all_matches[0] as $c) {
    $c = explode("#", $c);
    $country_name = $c[0];
    $results[$country_name] = [];
    $params = explode("%", $c[1]);
    foreach ($params as $param_line) {
        if (!$param_line) {
            continue;
        }
        $results[$country_name][] = explode("|", trim($param_line, '|'));
    }
}

// 计算总页数
$totalPages = ceil(count($results) / $itemsPerPage);

// 计算当前页起始偏移量
$offset = ($page - 1) * $itemsPerPage;

// 遍历生成对应页面的内容
$i = 0;
foreach ($results as $country_name => $params) {
    if ($i >= $offset && $i < ($offset + $itemsPerPage)) {
        // 生成赛事分类按钮
        echo '<button>' . $country_name . '</button>';
        // 生成赛事表格
        echo '<table width="30px" colspan="10px" border="1px solid black">';
        foreach ($params as $param_line) {
            $param_line[0] = isset($param_line[0]) ? $param_line[0] : '';
            $param_line[1] = isset($param_line[1]) ? $param_line[1] : '';
            $param_line[2] = isset($param_line[2]) ? $param_line[2] : '';
            $param_line[3] = isset($param_line[3]) ? $param_line[3] : '';
            $param_line[4] = isset($param_line[4]) ? $param_line[4] : '';
            echo '<tr>';
            echo '<td>' . $param_line[0] . '</td>';
            echo '<td>' . $param_line[1] . '</td>';
            echo '<td>' . $param_line[2] . '</td>';
            echo '<td>' . $param_line[3] . '</td>';
            echo '<td>' . $param_line[4] . '</td>';
            echo '</tr>';
        }
        echo '</table>';
    }
    $i++;
}
?>

3. 保持参数一致性 #

确保homepage.php中的$itemsPerPage值（当前为2）与script.js、ajax-matches.php中的值完全一致，避免分页逻辑混乱。

修复说明 #

• 点击分页按钮时，script.js会向ajax-matches.php发送请求，携带页码和每页条目数参数。
• ajax-matches.php根据参数生成对应页面的完整内容（按钮+表格），返回后替换页面容器内的HTML。
• 修正了ajax-matches.php中未遍历赛事数据数组的错误，确保所有赛事信息能正确渲染。

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