本文详细讲解如何在 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 对象：
强戈环形山: 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";
}
}? 提示：若需显示
available_stock()（即stock_quantity - reserved_stock），请在视图中一并序列化该计算字段："available_stock": stock.stock_quantity - stock.reserved_stock,
✅ 最终效果与验证要点
- ✅ 页面加载后，
stockData对象已就绪，可在浏览器控制台执行console.log(stockData)验证结构； - ✅ 点击任意规格 radio 按钮，下方库存文本即时更新，无闪烁、无延迟；
- ✅ 切换规格时，DOM 元素内容被准确替换，而非追加或残留旧值；
- ✅ 服务端数据变更（如管理员调整库存）将在下次页面加载时自动生效，前端无需额外轮询。
通过以上三步——服务端结构化准备 → 模板安全注入 → 前端精准消费——即可稳定、高效地实现 Django 电商中规格级库存的动态展示，为后续加入购物车校验、库存锁定等高级功能奠定坚实基础。
