如何在不刷新整页的情况下请求Laravel路由？

原方案实现 #

页面链接 #

<a class="nav-link" href="{{ route('forbest', ['id' => $id]) }}" role="tab" aria-controls="hot-elec-tab" aria-selected="false">
    {{ $categorylist->name }}
</a>

路由定义 #

Route::get('/forbest', [GuestController::class, 'Home'])->name('forbest');

控制器Home方法 #

public function Home(Request $request) {
    $productSubcategory = ProductSubCategory::where('deleted', 0)->where('status', 1)->get();
    $category = ProductCategory::where('status', 1)->where('deleted', 0)->get();
    $productCategory = ProductCategory::where('deleted', 0)->where('status', 1)->get();
    $offer = Offer::where('deleted', 0)->get();
    $featuredImage = FeaturedLink::get();
    $Blogs = Blogs::all();
    $brandList = Brand::get();

    $categoryId = $request->id;
    if ($categoryId) {
        $productList = Product::where('category_id', $categoryId)
            ->where('deleted', 0)
            ->get();
    } else {
        $productList = Product::where('deleted', 0)->get();
    }

    if ($productList->isEmpty()) {
        return redirect()->back();
    }

    if ($request->ajax()) {
        return view('partials.product_list', compact('productSubcategory', 'productList', 'category', 'productCategory', 'offer', 'featuredImage', 'brandList', 'Blogs'));
    }

    return view('guest/home')->with(compact('productSubcategory', 'productList', 'category', 'productCategory', 'offer', 'featuredImage', 'brandList', 'Blogs'));
}

原方案问题 #

点击链接触发整页刷新，用户被强制带回页面顶部，交互体验差。

尝试的AJAX改进方案 #

修改后的页面链接 #

<a class="nav-link" href="#" data-id="{{ $id }}" role="tab" aria-controls="hot-elec-tab" aria-selected="false">
    {{ $categorylist->name }}
</a>

AJAX请求代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.nav-link').on('click', function(event) {
        event.preventDefault();
        let categoryId = $(this).data('id');

        $.ajax({
            url: '{{ route('forbest') }}',
            method: 'GET',
            data: { id: categoryId },
            success: function(response) {
                $('#content').html(response);
            },
            error: function(xhr) {
                console.log('Error:', xhr);
            }
        });
    });
});
</script>

未改动的控制器Home方法 #

与原方案控制器代码一致。

问题分析与修复方案 #

核心问题点 #

1. 样式异常：product_list 局部视图可能依赖父页面CSS作用域，AJAX加载后新元素样式未正确生效；或视图存在重复容器结构，导致布局冲突。
2. 空列表处理错误：当商品列表为空时，控制器返回重定向，AJAX请求会获取整页HTML而非局部视图，直接替换会导致页面混乱。
3. 导航状态未更新：点击链接后未同步更新aria-selected属性，既不符合无障碍设计，也无视觉选中反馈。

修复步骤 #

1. 修正控制器空列表逻辑

将空列表时的重定向改为适配AJAX的响应：

if ($productList->isEmpty()) {
    if ($request->ajax()) {
        return response()->json(['empty' => true], 200);
    }
    return redirect()->back();
}

2. 优化AJAX请求处理

更新JS代码，处理空列表场景并同步导航状态：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.nav-link').on('click', function(event) {
        event.preventDefault();
        let $currentLink = $(this);
        
        // 更新导航选中状态
        $('.nav-link').attr('aria-selected', 'false');
        $currentLink.attr('aria-selected', 'true');

        let categoryId = $currentLink.data('id');

        $.ajax({
            url: '{{ route('forbest') }}',
            method: 'GET',
            data: { id: categoryId },
            success: function(response) {
                if (response.empty) {
                    $('#content').html('<div class="alert alert-info">当前分类下暂无商品</div>');
                } else {
                    $('#content').html(response);
                }
            },
            error: function(xhr) {
                $('#content').html('<div class="alert alert-danger">加载商品列表失败，请稍后重试</div>');
                console.log('Error:', xhr);
            }
        });
    });
});
</script>

3. 确保局部视图样式独立

检查partials/product_list.blade.php：

• 仅保留商品列表核心HTML结构，避免重复父页面的头部、导航等容器
• 确认视图内的CSS类与父页面无冲突，或添加独立样式作用域

4. 验证参数传递

可在控制器中添加日志调试，确认id参数正确接收：

\Log::info('AJAX请求分类ID:', ['id' => $categoryId]);

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