如何在不刷新整个页面的情况下向 Laravel 路由发出请求？

Question

我在主页的特定部分中有此链接。单击此链接时，它会调用“forbest”路线，该路线又会从控制器调用“Home”功能。该功能更新展示页面的小商品列表。

要调用的链接：

<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');

主页功能：

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 请求 JavaScript 代码：

// Include jQuery
<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>

主页功能：

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'));
}

Answer 1

我可以看到你的ajax有问题。

这里你的小错误是 url: '{{route('forbest') }}'，这里 jquery 将 forbest 视为变量。 你的ajax是

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

到

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