Laravel 8中如何接收AJAX响应并在Blade模板中展示排序后的数据

1. 拆分Blade模板（核心前提） #

你之前直接渲染整个products页面会包含导航、侧边栏等冗余内容，所以要把产品列表部分抽成独立子模板：

• 新建 resources/views/pages/user/shop/products/partials/products_list.blade.php，把原blade文件里循环输出产品、分页的代码全部挪到这个文件中
• 原来的父模板（pages.user.shop.products.products）里，原来放产品列表的位置替换为以下代码，给列表外层加一个可被JS定位的容器：

<div id="product-list-container">
    @include('pages.user.shop.products.partials.products_list', ['products' => $products])
</div>

这样初始加载和AJAX更新都复用同一个子模板，避免前后端渲染逻辑不一致。

2. 修改控制器代码 #

放开注释的渲染逻辑，调整为渲染子模板返回纯列表HTML：

public function sort_data(Request $request){
    $results='';
    if(request()->sub_sub_category){
        $results = Product::orderBy($request->sorting_selection,'asc')->with('categories')->whereHas('categories', function ($query){
            $query->where('slug', request()->sub_sub_category);
        })->paginate(24);
    } elseif (request()->sub_category){
        $results = Product::orderBy($request->sorting_selection,'asc')->with('categories')->whereHas('categories', function ($query){
            $query->where('slug', request()->sub_category);
        })->paginate(24);
    } elseif (request()->category){
        $results = Product::orderBy($request->sorting_selection,'asc')->with('categories')->whereHas('categories', function ($query){
            $query->where('slug', request()->category);
        })->paginate(24);
    } else{
        $results = Product::orderBy($request->sorting_selection,'asc')->with('categories')->paginate(24);
    }
    // 仅渲染产品列表子模板，输出纯HTML片段
    $returnHTML = view('pages.user.shop.products.partials.products_list')->with(["products"=>$results])->render();
    return response()->json(array('success' => true, 'html'=>$returnHTML));
}

注意：你之前直接返回整个view是HTML格式，而AJAX设置了dataType: 'json'，会因为格式不匹配触发请求错误，所以必须返回JSON格式的响应。

3. 修改AJAX请求代码 #

在success回调里直接用返回的HTML替换容器内容即可，同时注意要把当前页面的分类筛选参数一起传给后端，避免排序后丢失筛选条件：

$(document).ready(function(){
    $('#soting-select').on('change', function(){
        var value = $(this).val();
        var ajaxurl = '/sort-product';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: ajaxurl,
            type: 'post',
            dataType: 'json',
            data: {
                'sorting_selection' : value,
                // 传递当前页面的分类筛选参数
                'category': '{{ request()->category ?? '' }}',
                'sub_category': '{{ request()->sub_category ?? '' }}',
                'sub_sub_category': '{{ request()->sub_sub_category ?? '' }}'
            },
            success: function(response){
                if(response.success){
                    // 直接替换原有产品列表
                    $('#product-list-container').html(response.html);
                }
            },
            error: function(xhr){
                console.log(xhr.responseText);
            }
        });
    });
});

如果需要保留分页功能，只要把分页代码也放在子模板products_list.blade.php里，替换的时候分页会同步更新。

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