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

我正在使用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>

@csrf
$
量
1.
2.
3.
4.
5.
选择香料
温和的
中等
热的
选择纳安
不，纳安
印度薄饼
大蒜Naan+$1.00
罗蒂
选择午餐米饭
没有米饭
米饭
接近
添加到购物车

Ajax请求：

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

});

$（“#产品-1”）。提交（功能（e）{
e、 预防默认值（）；
设数量=$（“#数量”）.val（）；
设spice=$（“#spice”）.val（）；
设naan=$（“#naan”）.val（）；
让赖斯=$（“#赖斯”）.val（）；
let instructions=$（“#instructions”）.val（）；
设products_id=$（“#products_id”）.val（）；
让_-token=$（“输入[name=_-token]”）。val（）；
$.ajax({
url:“{route（'product.addToCart'）}}”，
键入：“获取”，
数据：{
产品标识：产品标识，
数量:数量,，
香料：香料，
纳安：纳安，
米：米，
说明：说明，
_令牌：_令牌
},
beforeSend:function（）{
},
成功：功能（响应）
{
$（“#产品-1”）[0]。重置（）；
$（“#产品模式”）.model（'hide'）；
$（“#产品模式”）。触发器（“单击”）；
}
})
});

这是我的控制器：

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

公共函数getAddToCart（请求$Request）
{
$products=产品：：查找（$request->products\u 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=新购物车（$oldCart）；
对于（$i=1；$i蒜头\添加（$products，$products->id，$instructions，$spice，$naan，$rice）；
}否则
$cart->add（$products，$products->id，$instructions，$spice，$naan，$rice）；
}
$request->session（）->put（'cart'，$cart）；
$oldCart=Session:：get（'cart'）；
$cart=新购物车（$oldCart）；
$request->session（）->put（'cart'，$cart）；
返回（）；
返回重定向（'/'）；
}

这是我展示手推车的刀锋部分

    @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>

@if（会话：：has（'cart'））
@foreach（$carts作为$product）
{{$product['item']['name']}
{{$product['instructions']}
{{$product['spice']}
@如果（！空（$product['rice']））
{{$product['rice']}
@恩迪夫
大小SM
尺寸LG
尺码XL
{{$product['item']['price']}
{{$product['price']}
@endforeach
传送
外卖
总数

25,49美元
免费送货

结账

任何人都可以帮助我的代码，我如何更新与ajax响应购物车

---

谢谢你

你面临的问题是什么？请说明我的第一个问题是我能够通过ajax在购物车中添加产品。但是我不知道如何在blade.php中显示更新的购物车而不刷新页面。基本上我是在同一刀片上添加产品并显示购物车。