如何通过Ajax调用拆分MySQL返回的大型数组？

嘿，别担心，这个问题太常见了——一次性拉取全年的地震数据，数据量肯定大到拖慢加载甚至触发浏览器限制。咱们用服务器端分页来解决这个问题，核心就是把数据拆成小块，按需加载，或者让用户分批获取，一步步来～

首先你的原PHP代码有个小bug：$result变量既用来存储查询结果集，又被当成数组存储行数据，这会导致错误。咱们先修正这个，再加上分页参数支持：

// 获取分页参数，默认第1页，每页20条数据（可根据需求调整）
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$perPage = isset($_GET['per_page']) ? (int)$_GET['per_page'] : 20;
$offset = ($page - 1) * $perPage;

// 先获取筛选后的总数据条数，方便前端计算总页数
$countQuery = "SELECT COUNT(*) as total FROM earthquakes WHERE milliseconds > 0";
$countResult = mysqli_query($con, $countQuery);
$totalRecords = mysqli_fetch_assoc($countResult)['total'];

// 查询当前页的地震数据（只返回前端需要的字段，别用SELECT *！）
$query = "SELECT id, title, milliseconds, magnitude, location 
          FROM earthquakes 
          WHERE milliseconds > 0 
          LIMIT {$offset}, {$perPage}";
$result = mysqli_query($con, $query);

$earthquakes = [];
while ($row = mysqli_fetch_assoc($result)) {
    $earthquakes[] = $row;
}

// 返回分页相关信息 + 当前页数据，方便前端处理
echo json_encode([
    'data' => $earthquakes,
    'total' => $totalRecords,
    'current_page' => $page,
    'per_page' => $perPage
]);

// 释放资源
mysqli_free_result($result);
mysqli_close($con);

这里做了几个关键优化：

• 修复了变量名冲突的问题
• 支持接收page和per_page参数实现分页
• 只查询前端需要的字段（避免传输冗余数据）
• 返回总条数，让前端知道有多少页数据

接下来调整前端的AJAX请求，实现分页功能——可以做传统的“上一页/下一页”按钮，也可以做滚动到底部自动加载的无限滚动。

方案A：传统分页按钮 #

let currentPage = 1;
const perPage = 20;

// 加载指定页的地震数据
function loadEarthquakes(page) {
    $.ajax({
        type: "GET",
        url: "database-sismico.php",
        data: {
            page: page,
            per_page: perPage,
            // 这里加上用户的筛选条件（比如日期范围）
            // start_time: $('#start-date').val(),
            // end_time: $('#end-date').val()
        },
        dataType: "json",
        success: function (response) {
            if (response.data.length > 0) {
                // 清空当前列表（如果是切换页）或者追加（如果是加载更多）
                $('#earthquake-list').empty();
                response.data.forEach(quake => {
                    $('#earthquake-list').append(`
                        <div class="quake-item">
                            <h4>${quake.title}</h4>
                            <p>时间：${new Date(quake.milliseconds)}</p>
                            <p>震级：${quake.magnitude}</p>
                        </div>
                    `);
                });

                // 更新分页状态
                const totalPages = Math.ceil(response.total / perPage);
                $('#page-info').text(`第 ${response.current_page}/${totalPages} 页`);
                $('#prev-btn').prop('disabled', response.current_page <= 1);
                $('#next-btn').prop('disabled', response.current_page >= totalPages);
            } else {
                alert('没有找到匹配的地震数据');
            }
        },
        error: function () {
            alert('加载数据失败，请稍后重试');
        }
    });
}

// 页面初始化加载第一页
loadEarthquakes(currentPage);

// 绑定分页按钮事件
$('#prev-btn').click(() => {
    currentPage--;
    loadEarthquakes(currentPage);
});

$('#next-btn').click(() => {
    currentPage++;
    loadEarthquakes(currentPage);
});

方案B：无限滚动（自动加载下一页） #

如果不想让用户手动点击分页按钮，可以实现滚动到底部自动加载：

let currentPage = 1;
const perPage = 20;
let isLoading = false;
let totalPages = 1;

function loadEarthquakes(page) {
    if (isLoading) return; // 避免重复请求
    isLoading = true;
    $('.loading-spinner').show();

    $.ajax({
        type: "GET",
        url: "database-sismico.php",
        data: {
            page: page,
            per_page: perPage,
            // 用户的筛选条件
            // start_time: $('#start-date').val(),
            // end_time: $('#end-date').val()
        },
        dataType: "json",
        success: function (response) {
            isLoading = false;
            $('.loading-spinner').hide();

            if (response.data.length > 0) {
                // 追加新数据到列表
                response.data.forEach(quake => {
                    $('#earthquake-list').append(`
                        <div class="quake-item">
                            <h4>${quake.title}</h4>
                            <p>时间：${new Date(quake.milliseconds)}</p>
                            <p>震级：${quake.magnitude}</p>
                        </div>
                    `);
                });

                totalPages = Math.ceil(response.total / perPage);
                currentPage = response.current_page;
            } else {
                alert('已经加载完所有数据啦');
            }
        },
        error: function () {
            isLoading = false;
            $('.loading-spinner').hide();
            alert('加载失败，请重试');
        }
    });
}

// 监听滚动事件，接近底部时加载下一页
$(window).scroll(function() {
    const scrollBottom = $(window).scrollTop() + $(window).height();
    const documentHeight = $(document).height();
    
    if (scrollBottom >= documentHeight - 100 && currentPage < totalPages) {
        loadEarthquakes(currentPage + 1);
    }
});

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

• 给日期字段加索引：如果用户按日期筛选，一定要在milliseconds字段上创建数据库索引，这样查询速度会大幅提升：

  CREATE INDEX idx_earthquakes_milliseconds ON earthquakes(milliseconds);
  

• 缓存热门查询：如果很多用户会查询去年的数据，可以把分页后的结果缓存起来（比如用Redis或者文件缓存），减少数据库的重复查询压力。
• 前端虚拟滚动：如果数据量极大，即使分页后页面DOM元素太多也会卡顿，可以用虚拟滚动技术（比如原生实现或第三方库），只渲染当前可见区域的元素。

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