产品页面 - AJAX 添加到购物车功能不起作用/无法将数据发送到服务器数据库

问题描述 投票:0回答:0

这是我的代码:

@extends('layout.home')

@section('title', 'Activity')

@section('content')
    <!-- Shop Detail Start -->
    <div class="container-fluid py-5">
        <div class="row px-xl-5">
            <div class="col-lg-5 pb-5">
                <div id="product-carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner border">
                        <div class="carousel-item active">
                            <img class="w-100 h-100" src="/uploads/{{ $product->image }}" alt="image">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-7 pb-5">
                <h3 class="font-weight-semi-bold">{{ $product->product_name }}</h3>
                <br>
                <h4 class="font-weight-semi mb-4">{{ number_format($product->obtained)}} Points</h4>
                <p>Individual or Group (MAX 3 Person).</p>
                <div class="d-flex mb-3">
                    <p class="text-dark font-weight-medium mb-0 mr-3">Period:</p>
                    @php
                    $periods = explode(',',$product->period)
                    @endphp

                    @foreach ($periods as $period)
                    <div class="custom-control custom-radio">
                        <input type="radio" class="period" id="{{ $period }}" name="period" value="{{ $period }}">
                        <label for="{{ $period }}">{{ $period }}</label>
                    </div>
                    @endforeach
                </div>
                <div class="d-flex align-items-center mb-4 pt-2">
                    <p class="text-dark font-weight-medium mb-0 mr-3">Quantity:</p>
                    <div class="input-group quantity mr-3" style="width: 130px;">
                        <input id="quantity" name="quantity" type="number" step="1" min="0" class="input quantity form-control bg-secondary text-center" value="1">
                    </div>
                    <a href="#" class="btn btn-primary px-3"><span>Add to Cart</span></a>
                </div>
                <div class="d-flex pt-2">
                    <p class="text-dark font-weight-medium mb-0 mr-2">Share on:</p>
                    <div class="d-inline-flex">
                        <a class="text-dark px-2" href="">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a class="text-dark px-2" href="">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a class="text-dark px-2" href="">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a class="text-dark px-2" href="">
                            <i class="fab fa-pinterest"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row px-xl-5">
            <div class="col">
                <div class="nav nav-tabs justify-content-center border-secondary mb-4">
                    <a class="nav-item nav-link active" data-toggle="tab" href="#tab-pane-1">Description</a>
                    <a class="nav-item nav-link" data-toggle="tab" href="#tab-pane-2">Information</a>
                    <a class="nav-item nav-link" data-toggle="tab" href="#tab-pane-3">Reviews (0)</a>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-pane-1">
                        <h4 class="mb-3">Activity Description</h4>
                        <p>{{ $product->description }}.</p>
                    </div>
                    <div class="tab-pane fade" id="tab-pane-2">
                        <h4 class="mb-3">Additional Information</h4>
                        <p>This activity has terms and conditions in order to request and complete it</p>
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item px-0">
                                        <h4 class="mb-3">Period</h4>
                                        <p>Students must complete the activity in between following dates : </p>
                                        <p>{{ $product->period }}</p>
                                    </li>
                                    <li class="list-group-item px-0">
                                        <h4 class="mb-3">Location</h4>
                                        <p>The activity take a place in the following region :</p>
                                        <p>{{ $product->location }}</p>
                                    </li>
                                    <li class="list-group-item px-0">
                                        <h4 class="mb-3">Requirements</h4>
                                        <p>Student must provide a few or specific data or document in order to able request it :</p>
                                        <p>{{ $product->requirements }}</p>
                                    </li>
                                  </ul> 
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-pane-3">
                        <div class="row">
                            <div class="col-md-6">
                                <h4 class="mb-4">1 review for "{{ $product->product_name }}"</h4>
                                <div class="media mb-4">
                                    <img src="/front/img/user.jpg" png="Image" class="img-fluid mr-3 mt-1" style="width: 45px;">
                                    <div class="media-body">
                                        <h6>John Doe<small> - <i>01 Jan 2045</i></small></h6>
                                        <div class="text-primary mb-2">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star-half-alt"></i>
                                            <i class="far fa-star"></i>
                                        </div>
                                        <p>Diam amet duo labore stet elitr ea clita ipsum, tempor labore accusam ipsum et no at. Kasd diam tempor rebum magna dolores sed sed eirmod ipsum.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4 class="mb-4">Leave a review</h4>
                                <small>Your email address will not be published. Required fields are marked *</small>
                                <div class="d-flex my-3">
                                    <p class="mb-0 mr-2">Your Rating * :</p>
                                    <div class="text-primary">
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </div>
                                <form>
                                    <div class="form-group">
                                        <label for="message">Your Review *</label>
                                        <textarea id="message" cols="30" rows="5" class="form-control"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Your Name *</label>
                                        <input type="text" class="form-control" id="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="email">Your Email *</label>
                                        <input type="email" class="form-control" id="email">
                                    </div>
                                    <div class="form-group mb-0">
                                        <input type="submit" value="Leave Your Review" class="btn btn-primary px-3">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Shop Detail End -->
@endsection

@push('js')
    <script>
        $(function() {
            $('.add-to-cart').click(function(e){
                member_id = {{ Auth::guard('webmember')->user()->id }}
                id_product = {{ $product->id }}
                quantity = $('.quantity').val()
                period = $('.period').val()
                total = {{ $product->obtained }}*quantity
                is_checkout = 0

                $.ajax({
                    url : '/add_to_cart',
                    method : 'POST',
                    headers : {
                        "X-CSRF-TOKEN" : "{{ csrf_token() }}",
                    },
                    data: {
                        member_id,
                        id_product,
                        quantity,
                        period,
                        total,
                        is_checkout,
                    },
                    success : function (data) {
                        window.location.href = '/cart'
                    }
                });
            })
        })
        
    </script>
@endpush

这是 add_to_cart 控制器和网络路由:

public function add_to_cart(Request $request){
        $input = $request->all();
        Cart::create($input);
    }

Route::post('/add_to_cart', [HomeController::class,'add_to_cart']);


如果代码成功将数据发布到服务器并将我重定向到购物车页面,则代码可以正常工作。

当我检查页面源代码时,代码成功获取了会员ID和产品ID。但是,当我选择周期和数量后单击“添加到购物车”按钮时,它会滚动/跳回到页面顶部,也许无法获取所选数据(周期和数量)(如果是这样的话)怎么来的以及任何建议修复它?谢谢你。

javascript php ajax laravel
© www.soinside.com 2019 - 2024. All rights reserved.