添加到購物車而不刷新頁面

Question

我想在不刷新頁面的情況下實現加入購物車。 我是javascript和ajax的新手，請指導我。 這里嘗試使用防止默認而不是位置重新加載。 但產品未添加到購物車。

 function addToCart(id)
    {
        if(checkAddToCartValidity()) {
            $('#addToCart').modal();
            $('.c-preloader').show();

            $.ajax({
               type:"POST",
               url: '{{ route('cart.addToCart') }}',
              // data: $('#option-choice-form').serializeArray(),
              data: {
                    "_token": "{{ csrf_token() }}",
                    "id": id,
                    "quantity": 1
                },
               success: function(data){
                   $('#addToCart-modal-body').html(null);
                   $('.c-preloader').hide();
                   $('#modal-size').removeClass('modal-lg');
                   updateNavCart();
                  $('#cart_items_sidenav').html(parseInt($('#cart_items_sidenav').html())+1);
                  $('.add_to_card_sidebar').addClass('open');
                   location.reload();
                   
               }
           });
        }
        else{
            AIZ.plugins.notify('warning', 'Please choose all the options');
        }
    }

Answer 1

您可以為 html 分配一個 ID，該 ID 構成購物車內容，在執行操作時需要更新該內容。 執行操作后，請嘗試使用Document.getElementById()來編輯購物車的內容。

這是我的一個簡單示例：

<p id="par">hello</p>
document.getElementById("par").innerHTML = "bye"

此代碼會將文本從“hello”更改為“bye”而不刷新頁面。 您也可以將此應用到您的購物車。

這是一些文檔：
getElementById 文檔
HTML 身份證件
帶有 JS 的購物車示例