如何在Django的HTML模板和JS中同时使用view传递的statistics字典？

直接在视图中传入原字典，结合Django内置的json_script模板标签，就能同时满足HTML模板直接调用和JS安全解析的需求，具体步骤如下：

1. 视图层（views.py）正常传入原字典 #

不需要额外序列化，直接将Python字典传入模板上下文：

from django.shortcuts import render

def index(request):
    statistics = {
        'key1': '用户统计数据',
        'key2': 2024,
        'key3': [100, 200, 300],
        # 包含日期、模型对象等特殊类型也可，json_script会自动处理
    }
    return render(request, 'index.html', {'statistics': statistics})

2. HTML模板中直接调用字典 #

在HTML部分直接通过点语法访问字典键值：

<!-- HTML模板直接使用原字典 -->
<div class="stats-item">
    <span>统计项1：</span>{{ statistics.key1 }}
</div>
<div class="stats-item">
    <span>年份：</span>{{ statistics.key2 }}
</div>

3. JS中安全解析字典数据 #

使用Django的json_script模板标签，将Python字典转换为安全的JSON格式嵌入页面，再在JS中读取解析：

<!-- 用json_script生成安全的JSON数据块 -->
{{ statistics|json_script:"statistics-data" }}

<script>
    // 从DOM中读取JSON数据并解析为JS对象
    const statistics = JSON.parse(document.getElementById('statistics-data').textContent);
    
    // 正常使用JS对象
    console.log(statistics.key3); // 输出 [100, 200, 300]
    document.getElementById('chart').dataset.data = JSON.stringify(statistics.key3);
</script>

为什么这个方案可行？ #

• json_script标签会自动处理Python对象到JSON的转换，包括转义特殊字符、处理Django特定类型（如日期），生成的是带有type="application/json"的script标签，不会被浏览器执行，安全性更高。
• 原字典保持Python原生结构，HTML模板可以直接用点语法访问键值，无需额外处理。

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