我想在购物车中添加产品而不用 AJAX 和 Django 刷新页面

Question

当我在购物车中提交产品时，什么都不会发生。我想在不刷新页面的情况下使用 AJAX。 当我提交控制台消息时将显示。 我正在尝试首先使用 AJAX。 尝试在不刷新页面的情况下将产品添加到购物车中。 我需要帮助:)

查看 Django

def add_cart(request, product_id):
    cart = Cart(request)
    product = get_object_or_404(Product, id=product_id)

    form = CartProductForm(request.POST)
       
    if form.is_valid():
        cd = form.cleaned_data
        cart.add(product=product,
                quantity=cd['quantity'],
                update_quantity=cd['update_qt']
                )
                
    return JsonResponse({'status': 'success'}) 

表格

from django import forms
from django.core.validators import MinValueValidator, MaxValueValidator

class CartProductForm(forms.Form):
    quantity = forms.IntegerField(initial=1)
    update_qt = forms.BooleanField(required=False, initial=False, widget=forms.HiddenInput)

HTML 代码

<form action="{% url "..." %}"  method="post" data-id="{{ ... }}" class="form-order" id="form">
    {{ cart_product_form }}
    {% csrf_token %}
    <a data-id="{{ ... }}" class="buy-product"><button>BUY</button></a>
</form>

JS 代码

        $(".buy-product").on('click', function(e){
            e.preventDefault();
            var product_id = $(this).attr('data-id')
            var quantity = 1
            console.log(product_id)
            console.log(quantity)

            data = {
                'product_id': product_id,
                'quantity': quantity
            }
            var point='/cart/add/'+product_id+'/'
            
            $.ajax({
                headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
                },
                url: point,
                type: 'POST',


                data: data,

                success: function(data){
                    console.log('success')
                    console.log(csrftoken)
                    
                }
        })
    })

Answer 1

您可以阻止表单刷新页面，然后使用您的 JS 代码执行您需要的任何操作：

<form action="{% url "..." %}"  method="post" data-id="{{ ... }}" class="form-order" id="form" onsubmit="myFunction(event)">
...
</form>
<script>
function myFunction(event){
    event.preventDefault();
}
</script>

Answer 2

您需要在数据中添加csrftoken：{csrfmiddlewaretoken':csrftoken}。我也看不到你什么时候初始化你的变量，但我认为这只是一个例子。检查此答案以获取更多信息：link