在将产品添加到购物车AJAX/Django而不刷新页面后更新购物车数量？

Question

产品已成功添加到购物车中，但购物车值不是最新的。我必须刷新页面，以便div是最新的。我尝试了load（）和html（）方法，但什么都不会发生。 如何在将产品添加到购物车时刷新购物车容器？ 我需要帮忙

查看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>

HTML Span

<ul class="navbar-nav ml-auto d-block d-md-none">
      <li class="nav-item">
        <a class="btn btn-link" href="#"><i class="bx bxs-cart icon-single"></i> <span class="badge badge-danger" id="cartval">{{ cart | length }}</span></a>
      </li>
</ul>

JS代码

        $(".form-order").on('submit', function(e){
            e.preventDefault();
            var product_id = $(this).attr('data-id')
            var quantity = $(this).find("#id_quantite").val()
            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',
                dataType: 'json',
                data: data,

                success: function(data){
                    $("cartval").load();
                    $("#cartval").load(location.href + " #cartval");
                    
                }
        })
    })