Laravel API分页异常：前端无法在当前页面加载下页数据

问题根源在于Laravel的paginate()方法默认基于当前API请求URL生成分页链接，导致前端分页按钮直接跳转至API地址而非通过AJAX加载下一页数据。以下是两种可行的解决方式：

方法一：后端自定义分页基础URL #

在ProductApiController的index方法中，通过setPath()指定分页链接的基础路径为商品页面的前端路由，让返回的分页链接指向当前页面而非API地址：

public function index()
{
    $products = Product::paginate(10);
    // 将分页基础路径设置为商品列表页的路由（需确保路由名称正确）
    $products->setPath(route('products.index'));
    
    return response()->json($products);
}

方法二：前端拦截分页点击事件，通过AJAX请求数据 #

无需修改后端，直接在product.blade.php中通过JavaScript拦截分页链接的默认跳转行为，提取页码后发起AJAX请求获取对应页数据：

// 监听动态生成的分页链接点击事件
$(document).on('click', '.pagination a', function(e) {
    e.preventDefault(); // 阻止默认页面跳转
    
    // 从链接中提取页码参数
    const urlParams = new URLSearchParams(this.search);
    const page = urlParams.get('page');
    
    // 发起AJAX请求获取对应页的商品数据
    $.ajax({
        url: `/api/products?page=${page}`,
        type: 'GET',
        beforeSend: function() {
            // 可选：添加加载状态提示
            $('#product-list').append('<div class="loading">加载中...</div>');
        },
        success: function(response) {
            // 更新商品列表内容（需确保页面有对应ID的容器）
            $('#product-list').empty();
            response.data.forEach(product => {
                $('#product-list').append(`
                    <div class="product-card">
                        <h3>${product.name}</h3>
                        <p>价格：${product.price}元</p>
                    </div>
                `);
            });
            
            // 更新分页组件
            $('#pagination-container').html(response.links);
        },
        error: function() {
            $('#product-list').html('<div class="error">加载失败，请稍后重试</div>');
        }
    });
});

注意事项 #

• 确保页面中存在对应ID的容器（如product-list用于展示商品、pagination-container用于渲染分页组件）
• 使用事件委托（$(document).on）绑定点击事件，避免动态生成的分页链接无法触发事件
• 可根据需求添加加载状态、错误提示等交互优化

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