Django电商网站Ajax无刷新更新购物车数量失效问题求助

核心问题：JSON响应键名不匹配 #

后端返回的JSON键是"qty: "（带空格和冒号），但前端代码中尝试用json.qty取值，导致无法获取到正确的购物车数量，这是页面实时更新失效的直接原因。

修正步骤 #

1. 修正后端视图函数的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 = cart.__len__()
        # 修正键名，移除多余的空格和冒号
        response = JsonResponse({"qty": cart_quantity})
        return response

2. 优化前端按钮取值逻辑（可选但推荐）

如果页面存在多个商品添加按钮，原代码中$("#add_button").val()会始终取第一个按钮的值，改为$(this).val()确保获取当前点击按钮的商品ID：

<script>
    $(document).on("click", "#add_button", function (e) {
        e.preventDefault();
        $.ajax({
           type: "POST",
           url: "{% url \"add_cart\" %}",
           data: {
             product_id: $(this).val(),
             csrfmiddlewaretoken: "{{ csrf_token }}",
             action: "post",
           },
            success: function (json) {
                console.log(json); // 控制台查看返回数据，方便调试
                document.getElementById("cart_quantity").textContent = json.qty;
            },
            error: function (xhr, errmsg, err) {
                console.error(errmsg, err); // 错误时打印日志，快速定位问题
            }
        });
    })
</script>

3. 购物车添加逻辑优化（可选）

当前Cart类的add方法中，重复添加同一商品时无任何操作，不符合常规购物车累加数量的逻辑，可修改为：

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:
            # 累加已存在商品的数量
            self.cart[product_id]["quantity"] = self.cart[product_id].get("quantity", 1) + 1
        else:
            # 新增商品时初始化数量为1
            self.cart[product_id] = {"price": str(product.price), "quantity": 1}
        self.session.modified = True

    def __len__(self):
        # 统计购物车总商品数量（而非商品种类数）
        return sum(item["quantity"] for item in self.cart.values())

调试建议 #

按下F12打开浏览器开发者工具，切换到Network标签，点击添加按钮后查看Ajax请求的响应数据，确认qty字段是否正确返回，可快速排查后续问题。

内容的提问来源于stack exchange，提问作者Mohi