Django电商网站购物车商品页面跳转后消失问题求助

我用Django开发电商网站时碰到一个问题：点击「加入购物车」按钮后，购物车能正常显示新增商品，但跳转到首页或其他页面后，刚添加的商品就不见了。已经在JS和视图里加了调试代码，服务器端问题排查得差不多了，怀疑问题出在客户端，附上相关代码，求解决思路。

Views代码 #

def add_to_cart(request):
    try:
        cart_product = {
            "product_name": request.GET["product_name"],
            "product_price": request.GET["product_price"],
            "product_quantity": int(request.GET["product_quantity"]),
        }
        
        product_id = str(request.GET["product_id"])

        if "cart_data_obj" in request.session:
            cart_data = request.session["cart_data_obj"]
            
            if product_id in cart_data:
                # 商品已在购物车中，更新数量
                cart_data[product_id]['product_quantity'] += int(cart_product['product_quantity'])
            else:
                # 商品不在购物车，添加进去
                cart_data[product_id] = cart_product
            
            request.session["cart_data_obj"] = cart_data
        else:
            # 购物车为空，初始化并加入当前商品
            cart_data = {product_id: cart_product}
            request.session["cart_data_obj"] = cart_data

        # 计算购物车所有商品的总数量
        total_quantity_cart = sum(product_data['product_quantity'] for product_data in cart_data.values())
        request.session["total_quantity_cart"] = total_quantity_cart

        return JsonResponse({
            "data": request.session["cart_data_obj"],
            "totalcartitems": len(request.session["cart_data_obj"]),
            "total_quantity_cart": request.session["total_quantity_cart"]
        })

    except Exception as e:
        print(e)
        return HttpResponse(status=500)

JS代码 #

$(document).ready(function () {
    // 页面加载完成后绑定cartUpdated事件监听器
    $(document).on('cartUpdated', function () {
        // 在这里添加更新页面其他元素的代码
        console.log('购物车已更新，如有需要请更新其他UI元素。');
    });

    $("#add_to_cart_btn").on("click", function () {
        let product_quantity = 1;
        let product_id = $(this).closest('.col-12').find('.product_name').attr('id').split('_')[1];
        let product_name = $(".product_name").text();
        let product_price = $(".product_price").text();
        let this_val = $(this);

        console.log("商品ID : ", product_id);
        console.log("商品名称 : ", product_name);
        console.log("商品价格 : ", product_price);
        console.log("商品数量", product_quantity);
        console.log("当前元素 : ", this_val);

        // 准备客户端数据，调用服务端接口
        $.ajax({
            url: "/cart/",
            data: {
                "product_id": product_id,
                "product_name": product_name,
                "product_price": product_price,
                "product_quantity": product_quantity,
            },
            dataType: "json",
            beforeSend: function () {
                console.log("正在添加商品到购物车...");
            },
            success: function (response) {
                console.log("成功响应:", response);

                if (response.total_quantity_cart !== undefined) {
                    $(".cart_items_count").text(response.total_quantity_cart);
                    console.log("总数量已更新:", response.total_quantity_cart);
                } else {
                    console.log("错误: 响应中未找到'total_quantity_cart'。");
                }

                this_val.html("商品已加入购物车!");
                // 触发cartUpdated事件
                $(document).trigger('cartUpdated');
            },
            error: function (xhr, status, error) {
                console.log("错误:", error);
            },
            complete: function () {
                console.log("请求完成");
            }
        });
    });
});

HTML元素 #

<a class="nav-link active" aria-current="page" href="#">Shopping Cart<span class="badge rounded-pill cart_items_count">{{ total_quantity_cart }}</span></a>

排查与解决思路 #

1. 模板变量全局传递问题
   跳转页面后，购物车计数依赖模板中的{{ total_quantity_cart }}变量，但该变量仅在页面渲染时从session取值。如果其他页面的视图未将total_quantity_cart传入模板上下文，刷新后就会显示旧值或空值。

   • 解决：在所有需要显示购物车的页面视图中，将session中的购物车数量传入模板，示例：

     def home(request):
         total_quantity = request.session.get("total_quantity_cart", 0)
         return render(request, 'home.html', {'total_quantity_cart': total_quantity})
     

   • 更高效方案：使用Django上下文处理器，全局将购物车数量注入所有模板，避免重复代码。

2. 前端选择器范围错误
   JS中$(".product_name").text()和$(".product_price").text()会选中页面所有匹配元素，返回拼接后的文本。若页面有多个商品，会导致传入服务端的商品信息错误，进而破坏session中的购物车数据。

   • 解决：和获取product_id的方式一致，限定选择范围到当前点击的商品容器：

     let product_name = $(this).closest('.col-12').find('.product_name').text().trim();
     let product_price = $(this).closest('.col-12').find('.product_price').text().trim();
     

3. Django Session修改确认
   虽然代码中已重新赋值request.session["cart_data_obj"] = cart_data，但某些场景下Django无法检测到session字典的内部修改。可尝试在修改cart_data后添加：

   request.session.modified = True
   

   强制Django保存session修改。

4. 页面加载时同步购物车状态
   跳转页面时，购物车UI由模板变量渲染，而非AJAX响应。若session数据正确但模板未获取到，会显示异常。可在页面加载时主动请求购物车状态更新UI：

   $(document).ready(function() {
       // 页面加载时获取当前购物车数量
       $.ajax({
           url: "/get_cart_count/",  // 需要新增对应视图返回购物车数量
           dataType: "json",
           success: function(response) {
               $(".cart_items_count").text(response.total_quantity_cart);
           }
       });
   
       // 原有事件绑定代码...
   });
   

   对应的视图函数：

   def get_cart_count(request):
       total_quantity = request.session.get("total_quantity_cart", 0)
       return JsonResponse({"total_quantity_cart": total_quantity})
   

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