我想在不使用 AJAX 和 Django 刷新页面的情况下将产品添加到购物车中

Question

Nothing will ne happened when I submit product in the the cart. I want to use AJAX without refreshing page. When I submit the console message will be displayed. I'm trying to use AJAX first. Trying to add product in the cart without refreshing page. I need help please:)

Views 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'}) 

Form

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 Code

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

        $(".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

You need to add csrftoken in data: {csrfmiddlewaretoken':csrftoken} . Also I don't see when you initialize your variables, but I think is just example. Check this answer for more: link

Answer 2

You can prevent form from refreshig the page and then do whatever you need with your JS code:

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