添加到购物车而不刷新页面

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，这些内容在执行操作时需要更新。操作完成后，尝试使用Document.getElementById()编辑购物车的内容。

下面是我的一个简短的例子:

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

这段代码将从"hello"到"再见"而不刷新页面。您也可以将此应用到您的购物车中。

getElementById docs
HTML ID docs
购物车示例与JS