如何在Laravel 5.6中使用Ajax实现无刷新添加商品至购物车？

1. 优化控制器返回数据 #

你当前的控制器仅返回成功消息，需要补充返回新增商品的详细信息，让前端能直接渲染。修改后的控制器代码如下：

public function add_cart(Request $request, $id)
{
    // 验证请求参数，确保quantity是正整数
    $request->validate([
        'quantity' => 'required|integer|min:1'
    ]);

    if (Auth::guard('customer')->check()) {
        $product = Product::find($id);

        if (!$product) {
            return response()->json(['message' => '商品不存在'], 404);
        }

        $user = Auth::guard('customer')->user();
        $add_cart = new Cart;
        $add_cart->product_id = $product->id;
        $add_cart->user_id = $user->id;
        $add_cart->quantity = $request->quantity;
        $add_cart->save();

        // 返回商品详情和购物车统计数据
        return response()->json([
            'message' => '商品已添加到购物车',
            'product' => [
                'id' => $product->id,
                'name' => $product->name,
                'price' => $product->price,
                'image' => $product->image, // 假设商品模型有image字段
                'quantity' => $request->quantity,
                'subtotal' => $product->price * $request->quantity
            ],
            'cart_count' => Cart::where('user_id', $user->id)->sum('quantity') // 购物车总商品数
        ]);
    } else {
        // 未登录时返回JSON提示，让前端跳转
        return response()->json(['message' => '请先登录'], 401);
    }
}

2. 前端Ajax实现 #

假设页面上有添加购物车按钮和购物车展示区域：

<button class="add-to-cart-btn" data-product-id="{{ $product->id }}">加入购物车</button>
<!-- 购物车商品展示区 -->
<div id="cart-items">
    <!-- 动态渲染的商品会插入这里 -->
</div>
<!-- 购物车商品数量标记 -->
<span id="cart-count">0</span>

添加jQuery（Laravel 5.6默认集成）的Ajax处理代码：

$(document).ready(function() {
    $('.add-to-cart-btn').click(function(e) {
        e.preventDefault();
        
        let productId = $(this).data('product-id');
        // 如果是用户输入数量，替换成对应输入框的值，比如$('.quantity-input').val()
        let quantity = 1;
        
        $.ajax({
            url: `/cart/add/${productId}`, // 对应你的路由地址
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}', // Laravel CSRF令牌
                quantity: quantity
            },
            success: function(response) {
                // 显示成功提示（可替换为Toast等更友好的提示）
                alert(response.message);
                
                // 更新购物车总数量
                $('#cart-count').text(response.cart_count);
                
                // 渲染新增商品到购物车区域
                let cartItem = `
                    <div class="cart-item">
                        <img src="/storage/${response.product.image}" alt="${response.product.name}" width="50">
                        <div class="item-info">
                            <h4>${response.product.name}</h4>
                            <p>单价: ${response.product.price}元</p>
                            <p>数量: ${response.product.quantity}</p>
                            <p>小计: ${response.product.subtotal}元</p>
                        </div>
                    </div>
                `;
                $('#cart-items').append(cartItem);
            },
            error: function(xhr) {
                let response = xhr.responseJSON;
                alert(response.message || '添加失败，请重试');
                
                // 未登录时跳转到登录页
                if (xhr.status === 401) {
                    window.location.href = '/customer/login';
                }
            }
        });
    });
});

3. 路由配置 #

在routes/web.php中添加POST路由：

Route::post('/cart/add/{id}', 'CartController@add_cart')->name('cart.add');

注意事项 #

• 若商品图片存储在storage目录，需执行php artisan storage:link创建软链接，确保图片能正常访问。
• 若数量由用户输入，需在前端做基础验证，确保输入为正整数。
• 可将alert提示替换为更美观的Toast组件，提升用户体验。

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