Laravel8项目如何使用Jquery Ajax实现无刷新加入购物车功能

1. 移除触发刷新的代码 #

你当前页面刷新是因为AJAX成功回调里写了window.location.reload()，先把这行代码删掉即可。

2. 调整控制器返回数据 #

原来的控制器仅返回成功状态，需要补充前端需要更新的展示数据，修改addToCart方法的返回逻辑：

public function addToCart($id)
{
    $product = Product::findOrFail($id);
    $cart = session()->get('cart', []);
    
    if(isset($cart[$id])) {
        $cart[$id]['quantity']++;
    } else {
        $cart[$id] = [
                     "name" => $product->product_name,
                     "quantity" => 1,
                     "price" => $product->price,
                     "maelezo" => $product->product_context,
                     "image" => $product->image
         ];
    }
       
    session()->put('cart', $cart);
    // 计算购物车总商品数返回前端
    $cartTotal = array_sum(array_column($cart, 'quantity'));
    return response()->json([
        'success' => true,
        'cart_total' => $cartTotal,
        'added_product' => $product->product_name
    ]);
}

3. 前端新增购物车数量展示节点，修改AJAX回调 #

首先在你的页面导航栏/购物车入口位置，给数量展示标签添加唯一ID，方便后续DOM更新：

<!-- 示例：购物车图标旁边的数量展示 -->
<span class="cart-num" id="cart-count">
    {{ array_sum(array_column(session()->get('cart', []), 'quantity')) }}
</span>

然后修改AJAX的成功回调逻辑，拿到返回数据后直接更新页面元素：

function addtocart(id) {
    var _url = '/product/add-to-cart/'+id;
    $.ajax({
        url: _url,
        method: "GET",
        data: {
            _token: '{{ csrf_token() }}', 
            id: id
        },
        success: function (response) {
            if(response.success){
                // 更新页面上的购物车总数量
                $('#cart-count').text(response.cart_total);
                // 弹出加入成功提示，可替换为你项目在用的提示组件（比如Toast、Tippy提示）
                alert(response.added_product + ' 已成功加入购物车');
                // 如果你的项目有侧边悬浮购物车面板，在这里追加/更新面板内的商品列表即可
            }
        },
        error: function (data) {
            console.log('Error:', data);
            alert('加入购物车失败，请重试');
        }
    });           
}

可选优化建议 #

加入购物车属于修改服务端数据的操作，建议将路由请求方式从GET改为POST，避免被爬虫误触发、也更符合接口规范：

1. 修改路由定义：Route::post('/product/add-to-cart/{id}', [ProductController::class, 'addToCart'])->name('add.to.cart')->middleware('loggedin');
2. 将AJAX配置中的method: "GET"改为method: "POST"即可，你已经提前配置了全局CSRF头，不需要额外调整其他参数。

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