Ajax не работает без обновления страницы

Ajax не работает без обновления страницы, чтобы заставить его работать.Я кодирую сайт электронной коммерции на django и должен показать количество товаров в корзине, но он не показывает количество без обновления страницы.

        <script>
            $(document).on("click", "#add_button", function (e) {
                e.preventDefault();
                $.ajax({
                   type: "POST",
                   url: "{% url "add_cart" %}",
                   data: {
                     product_id: $("#add_button").val(),
                     csrfmiddlewaretoken: "{{ csrf_token }}",
                     action: "post",
                   },
                    success: function (json) {
                        {#console.log(json)#}
                        document.getElementById("cart_quantity").textContent = json.qty
                    },
                    error: function (xhr, errmsg, err) {

                    }
                });
                
            })
        </script>

class Cart:
    def __init__(self, request):
        self.session = request.session
        cart = self.session.get("cart_key")
        if cart is None:
            cart = self.session["cart_key"] = {}
        self.cart = cart

    def add(self, product):
        product_id = str(product.id)
        if product_id in self.cart:
            pass
        else:
            self.cart[product_id] = {"Price: ": str(product.price)}
        self.session.modified = True

    def __len__(self):
        return len(self.cart)

def add_cart(request):
    cart = Cart(request)
    if request.POST.get("action") == "post":
        product_id = int(request.POST.get("product_id"))
        product = get_object_or_404(Product, id=product_id)
        cart.add(product=product)
        cart_quantity = cart.__len__()
        # response = JsonResponse({"product name: ": product.name})
        response = JsonResponse({"qty: ": cart_quantity})
        return response

<p id="cart_quantity" >{{ cart|length }}</p>

моя кнопка покупки показывает это, когда я добавляю товар и когда я обновляю показывает количество введите описание изображения здесь

Я думаю, что проблема связана с несоответствием между ключом в JSON-ответе от вашего представления Django и тем, к чему ваш ajax js пытается получить доступ на вашей цели каким-то образом. (api...). И почему я так думаю: Ваш код:

def add_cart(request):
 cart = Cart(request)
 if request.POST.get("action") == "post":
 product_id = int(request.POST.get("product_id"))
 product = get_object_or_404(Product, id=product_id)
 cart.add(product=product)
 cart_quantity = len(cart)
 response = JsonResponse({"qty:": cart_quantity}) # Key is "qty:"
 return response

Я увидел, что ключ в JSON-ответе "qty:", а не "qty", и вы пытаетесь получить доступ к вашему json с помощью "json.qty" в соответствии с этим кодом:

success: function (json) {
 document.getElementById("cart_quantity").textContent = json.qty; // Trying to access "qty"
}

и не в соответствии с тем, что вы определили перед "qty:". Другими словами: qty из json не соответствует ключу "qty:". (с двоеточием). И в итоге вы, скорее всего, получите "undefined" от qty, потому что вы пытались получить доступ к нему, а не к правильному "qty:" (ключ правильный и оригинальный в вашем коде). Если вы добавите (чтобы увидеть ошибку) console.log(json); перед

document.getElementById("cart_quantity").textContent = json.qty;

В такой функции

success: function (json) {
 console.log(json); // Log the JSON response
 document.getElementById("cart_quantity").textContent = json.qty;
}

Вы увидите { "qty:": 5 // The key includes a colon } а не в соответствии с тем, что вы хотели без него. (количество без двоеточия).

Решение следующее: Удалите двоеточие из qty. Из-за несоответствия в json, которое я объяснил ранее. Вот правильный код:

def add_cart(request):
cart = Cart(request)
if request.POST.get("action") == "post":
product_id = int(request.POST.get("product_id"))
product = get_object_or_404(Product, id=product_id)
cart.add(product=product)
cart_quantity = len(cart)
response = JsonResponse({"qty": cart_quantity}) # Key is "qty" without colon
return response
Вернуться на верх