javascript - 如何使用 ajax json 响应更新购物车

Question

我正在使用 ajax 请求将项目添加到购物车，但我不知道如何使用 ajax 响应更新购物车。

这是我的 index.blade.php 代码，我在其中将商品添加到购物车中，其中包含购物车中的一些输入：

<form id="product-1">
            @csrf
        <div class="modal-body cart-addon" style="margin-top: 20px">
            <div class="food-item white">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-lg-6">
                        <div class="item-img pull-left">
                            <a class="restaurant-logo pull-left" href="#"><img id="image"/> </a>
                        </div>

                        <div class="rest-descr">
                            <h6><input id="name" name="name" style="width: 200px; border: none; margin-top: 15px" readonly></h6>
                        </div>

                    </div>
                    <!-- end:col -->
                    <div class="col-xs-6 col-sm-2 col-lg-2 text-xs-center"> <span class="price pull-left">$<input id="price" name="price" style="width: 50px; border: none" readonly></span></div>

                    <div class="col-xs-6 col-sm-4 col-lg-4">
                        <div class="row no-gutter">
                            <div class="form-group">
                                <select class="form-control" id="quantity" name="quantity" required>
                                    <option selected="selected" disabled="disabled" value="">Quantity</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <select class="form-control" id="spice" name="spice" required>
                        <option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Spice</option>
                        <option value="Mild" style="font-size: 14px">Mild</option>
                        <option value="Medium" style="font-size: 14px">Medium</option>
                        <option value="Hot" style="font-size: 14px">Hot</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="naan" name="naan" required>
                        <option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Naan</option>
                        <option value="No Naan" style="font-size: 14px">No Naan</option>
                        <option value="Naan"  style="font-size: 14px">Naan</option>
                        <option value="Garlic Naan" class="red">Garlic Naan +$1.00</option>
                        <option value="Roti"  style="font-size: 14px">Roti</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="rice" name="rice" required>
                        <option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Lunch Rice</option>
                        <option value="No Rice" style="font-size: 14px">No Rice</option>
                        <option value="Rice"  style="font-size: 14px">Rice</option>
                    </select>
                </div>
                <input class="form-control" name="instructions" id="instructions" placeholder="Instruction"/>

            </div>
            <div class="row">
                <div class="col-md-7"></div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
                <div class="col-md-3">
                        <input hidden name="products_id" id="products_id">
                        <button type="submit" class="btn theme-btn">Add to cart</button>
                </div>
            </div>
        </div>
        </form>

阿贾克斯请求：

<script>
$("#product-1").submit(function (e){
    e.preventDefault();

    let quantity = $("#quantity").val();
    let spice = $("#spice").val();
    let naan = $("#naan").val();
    let rice = $("#rice").val();
    let instructions = $("#instructions").val();
    let products_id = $("#products_id").val();
    let _token = $("input[name=_token]").val();

    $.ajax({
        url: "{{route('product.addToCart')}}",
        type: "get",
        data:{
            products_id:products_id,
            quantity:quantity,
            spice:spice,
            naan:naan,
            rice:rice,
            instructions:instructions,
            _token:_token
        },
        beforeSend: function() {

        },
        success:function(response)
        {
            $("#product-1")[0].reset();
            $('#product-modal').modal('hide');
            $('#product-modal').trigger("click");
        }
    })

});

这是我的控制器：

public function getAddToCart(Request $request)
{
    $products = Products::find($request->products_id);
    $quantity = $request->input('quantity');
    $instructions = $request->input('instructions');
    $spice = $request->input('spice');
    $naan = $request->input('naan');
    $rice = $request->input('rice');

    $oldCart = Session::has('cart') ? Session::get('cart') : null;
    $cart = new Cart($oldCart);

    for ($i = 1; $i <= $quantity; $i++)
    {
        if ($naan == "Garlic Naan"){
            $cart->garlic_add($products, $products->id, $instructions, $spice, $naan, $rice);
        } else
        $cart->add($products, $products->id, $instructions, $spice, $naan, $rice);
    }

    $request->session()->put('cart', $cart);

    $oldCart = Session::get('cart');
    $cart = new Cart($oldCart);

    $request->session()->put('cart', $cart);
    return back();
   return redirect('/');
}

这是我展示购物车的刀片部分。

    @if(Session::has('cart'))
@foreach($carts as $product)
    <div class="order-row bg-white">
        <div class="widget-body">
            <div class="title-row">{{ $product['item']['name'] }}
                <form id="reduceProduct">
                    <input name="id" id="id" value="{{$product['item']['id']}}">
                <button type="submit" style="background-color: transparent; border: 0;"><i class="fa fa-trash pull-right" style="color: #FF3300"></i></button>
                </form>
            </div>
            <div class="title-row">{{ $product['instructions'] }}</div>
            <div class="title-row">{{ $product['spice'] }}</div>
            @if(!empty($product['rice']))
                <div class="title-row">{{ $product['rice'] }}</div>
            @endif
            <div class="form-group row no-gutter">
                <div class="col-xs-8">
                    <select class="form-control b-r-0" id="exampleSelect1">
                        <option>Size SM</option>
                        <option>Size LG</option>
                        <option>Size XL</option>
                    </select>
                </div>
                <div class="col-xs-4">
                    <input class="form-control" type="number" value="{{ $product['qty'] }}" id="example-number-input">
                    {{ $product['item']['price'] }}
                    {{ $product['price'] }}
                </div>
            </div>
        </div>
    </div>
@endforeach
<!-- end:Order row -->
<div class="widget-delivery clearfix">
    <form>
        <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
            <label class="custom-control custom-radio">
                <input id="radio4" name="radio" type="radio" class="custom-control-input" checked=""> <span class="custom-control-indicator"></span> <span class="custom-control-description">Delivery</span> </label>
        </div>
        <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
            <label class="custom-control custom-radio">
                <input id="radio3" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Takeout</span> </label>
        </div>
    </form>
</div>
<div class="widget-body">
    <div class="price-wrap text-xs-center">
        <p>TOTAL</p>
        <h3 class="value"><strong>$ 25,49</strong></h3>
        <p>Free Shipping</p>
        <button onclick="location.href='checkout.html'" type="button" class="btn theme-btn btn-lg">Checkout</button>
    </div>
</div>

任何人都可以帮助我提供如何使用 ajax 响应更新购物车的代码。

谢谢你

标签： javascriptajaxlaravelcartshopping-cart