Laravel商城页AJAX筛选与Load More联动功能异常求助

核心问题根因 #

• 分页页码逻辑错误：点击加载更多完成后直接将page重置为1，且筛选条件变更时没有主动重置page为1。当你移除筛选条件时，page仍保留之前加载到的高页码，请求的页码超出了无筛选条件下的总页数，自然返回空数据。
• DOM选择器不一致：beforeSend中清空的是#products节点，请求成功后写入的是#product节点，两者ID不匹配会导致内容渲染异常。
• 加载更多的状态处理逻辑错误：加载更多完成后无需重置page，只有当筛选条件发生变化时才需要重置分页到第一页。

修复后的代码 #

前端JS逻辑 #

// 全局变量保留
var page = 1;
var isLoadMore = false; // 替换原clicked变量，语义更清晰

// 加载更多按钮点击事件
$("#load-btn").click( function(e) {
    e.preventDefault(); // 阻止submit按钮默认提交行为，必须添加
    page++;
    isLoadMore = true;
    filter();
});

// 注意：所有筛选条件变更（比如点击分类复选框）触发filter的位置，必须先重置page
// 示例：
// $(".category").change(function(){
//     page = 1; // 筛选条件变化，分页回到第一页
//     isLoadMore = false;
//     filter();
// })

function filter() {
    var url = '{{ route("front.shop.filter") }}';
    var categories = [];
    $(".category:checked").each(function(){
        categories.push($(this).val());
    });
          
    $.ajax({
        url: url,
        data: {
            categories:categories,
            page: page
        },
        type: 'post',
        beforeSend:function(){
            $('.load-more').show();
            if(!isLoadMore){
                $('#products').html(''); // 统一使用#products选择器
            }
        }
    }).done(function(data){
        setTimeout(function(){ 
            $('.load-more-skelton').hide();
            if(isLoadMore){
                $('#products').append(data.view);
                isLoadMore = false;
                // 此处不要重置page，加载更多完成后保留当前页码，下次点击继续累加
            } else {
                $('#products').html(data.view);
            }
            // 基础优化：返回内容为空时隐藏加载更多按钮
            if($.trim(data.view) == '') {
                $("#load-btn").hide();
            } else {
                $("#load-btn").show();
            }
        }, 1500);
    }).fail(function(){
        // 请求失败时回退页码，避免跳页
        if(isLoadMore) {
            page--;
            isLoadMore = false;
        }
    });
}

后端可选优化 #

如果需要更精准控制加载更多按钮的显隐，可以调整后端返回总页数：

public function filters(Request $request)
{
    $products = Product::where('status' , 'active');
    if($request->categories){
        $products = $products->whereIn('category_id',$request->categories);
    } 
    $products = $products->latest()->paginate(8);
    $view = view('front.includes.view',compact('products'))->render();
    return response()->json([
        'view' => $view,
        'total_page' => $products->lastPage() // 新增返回总页数
    ]); 
}

前端拿到total_page字段后，判断当page >= total_page时隐藏加载更多按钮即可。

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