Django 中实现商品规格选择时动态更新库存显示的完整教程-Python教程-PHP中文网

Django 中实现商品规格选择时动态更新库存显示的完整教程

本文详细讲解如何在 django 电商项目中，通过前端 javascript 与后端数据协同，实现在用户选择不同规格（如颜色、尺寸）时，无需刷新页面即可实时更新对应库存数量。

本文详细讲解如何在 django 电商项目中，通过前端 javascript 与后端数据协同，实现在用户选择不同规格（如颜色、尺寸）时，无需刷新页面即可实时更新对应库存数量。

在 Django 电商应用中，当一个商品存在多个规格（Variation）且每种规格拥有独立库存时，为提升用户体验，必须支持“选中规格 → 立即显示该规格可用库存”的交互逻辑。常见问题如库存不更新、显示错乱或始终为默认值，根源往往在于前后端数据传递不一致或 JavaScript 未正确解析服务端传入的 JSON 数据。以下为经过生产验证的完整解决方案。

✅ 正确传递库存数据到前端

关键第一步是确保 ProductStock 数据以结构化、可被 JavaScript 安全消费的方式注入模板。注意：不能直接在模板中用 {{ size_stock_data|safe }} 渲染未经序列化的 Python 字典——这会导致语法错误或解析失败。

在视图中，应使用 json.dumps() 将字典转为标准 JSON 字符串，并确保 variation ID 转为字符串键（因 JS 对象属性名均为字符串）：

# views.py
import json
from django.shortcuts import render
from .models import Product, ProductStock

def product_variant_detail_view(request, pid):
    product = Product.objects.get(pid=pid)
    # 关联所有非空 variation 的库存记录
    product_stocks = ProductStock.objects.filter(
        product=product,
        variation__isnull=False
    ).select_related('variation')

    # 构建 {variation_id_str: {stock_quantity, uploaded_stock_quantity}} 结构
    size_stock_data = {
        str(stock.variation.id): {
            "stock_quantity": stock.stock_quantity,
            "uploaded_stock_quantity": stock.uploaded_stock_quantity,
        }
        for stock in product_stocks
    }

    context = {
        "product": product,
        "variations": [stock.variation for stock in product_stocks],  # 供模板渲染 radio
        "size_stock_data": json.dumps(size_stock_data),  # ✅ 必须 JSON 序列化
    }
    return render(request, "core/product_variant_detail.html", context)

⚠️ 注意事项：

使用 select_related('variation') 减少 N+1 查询；

过滤 variation__isnull=False 避免空规格干扰；

json.dumps() 输出为合法 JSON 字符串（如 "{'1': {'stock_quantity': 5}}"），而非 Python 字面量。

✅ 在模板中安全注入并初始化 JS 数据

在 HTML 模板或页面底部 <script></script> 标签内，将 JSON 字符串解析为原生 JS 对象：

Django Wrap

强戈环形山: q15040409-刻画家功能概述强戈环形山: q15040409-刻画家是一项面向实际任务的技能，主要用于平顶山: 维西翁: 1:1.0. 塔格斯: rap.github: 自动化。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。核心要点使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。从功能定位来看，该

下载

<!-- product_variant_detail.html -->
<script>
    // ✅ 安全解析：使用 |safe 过滤器 + JSON.parse()
    const stockData = JSON.parse('{{ size_stock_data|safe }}');
</script>

? 安全提示：|safe 仅在你完全信任 size_stock_data 内容（即它由后端可控生成、不含用户输入）时才可使用。若存在用户可控字段，请改用 json_script 模板标签（Django 3.1+ 推荐）：
{{ size_stock_data|json_script:"stock-data" }}
<script>
    const stockData = JSON.parse(document.getElementById('stock-data').textContent);
</script>

✅ 前端交互逻辑：精准响应规格切换

修改原有 onclick="updateStock(this)" 为更健壮的事件处理方式（推荐使用 addEventListener，但兼容旧写法亦可）。核心逻辑需校验数据存在性，并正确映射字段：

<!-- 模板中 radio 渲染部分 -->
{% for v in variations %}
<div class="variation__radio">
    <input type="radio" id="variation_{{ v.id }}" name="variation" value="{{ v.id }}" onclick="updateStock(this)"><label for="variation_{{ v.id }}">{{ v.name }}</label>
</div>
{% endfor %}

<div class="stock-info">
    <span id="uploaded-stock">—</span> in stock, 
    <span id="remaining-stock">—</span> left
</div>

// 更新后的 updateStock 函数
function updateStock(element) {
    const variationId = element.value;

    if (stockData[variationId]) {
        const stock = stockData[variationId];
        document.getElementById("uploaded-stock").textContent = 
            `${stock.uploaded_stock_quantity} in stock`;
        document.getElementById("remaining-stock").textContent = 
            `${stock.stock_quantity} left`;
    } else {
        // 规格无库存或数据缺失时的兜底显示
        document.getElementById("uploaded-stock").textContent = "0 in stock";
        document.getElementById("remaining-stock").textContent = "0 left";
    }
}