1. 前后端数据交互的挑战
在构建动态web应用时，我们经常需要将django视图层处理过的python数据传递给前端的javascript脚本，以便进行数据可视化（如图表）、动态内容渲染或复杂的客户端逻辑。一个常见的场景是，后端计算或从数据库获取的数据，需要在前端的javascript图表库（如google charts、chart.js）中使用。
然而，直接在Django模板中通过{{ python_variable }}的方式将Python变量嵌入到JavaScript代码中，存在诸多问题：
- 类型不匹配： Python的数据类型（如列表、字典）与JavaScript的字符串嵌入方式不兼容，容易导致语法错误。
- 转义问题： 如果Python变量中包含特殊字符（如引号、换行符），未经适当转义直接嵌入JavaScript字符串中会导致脚本解析失败或安全漏洞（如XSS）。
- 安全性： 未经安全处理的用户输入数据直接嵌入JavaScript，可能导致跨站脚本攻击。
- 可读性差： 混合Python模板标签和JavaScript代码会使模板文件变得混乱，难以维护。
为了解决这些问题，Django提供了一个优雅且安全的解决方案：json_script模板标签。
2. json_script：官方推荐的解决方案
json_script是Django 2.1及更高版本引入的一个内置模板标签，它旨在安全地将Python数据结构序列化为JSON格式，并将其嵌入到HTML模板中的
- 自动JSON序列化： 将Python对象（如列表、字典、数字、字符串等）自动转换为符合JSON标准的字符串。
- 安全转义： json_script会自动处理HTML和JavaScript的特殊字符转义，防止XSS攻击。
- 清晰分离： 数据存储在type="application/json"的script标签中，与实际执行的JavaScript代码分离，提高了代码的可读性和维护性。
- 易于访问： 前端JavaScript可以通过DOM操作轻松获取并解析这些JSON数据。
3. 使用示例
假设我们需要将一个从Django视图传递过来的数值，用于Google Charts图表的多个数据点。
3.1 Django视图 (views.py)
首先，在Django视图中准备好需要传递给前端的数据。这里我们准备一个简单的数值和一个更复杂的列表数据。
from django.shortcuts import render
import json
def chart_data_view(request):
# 这是一个需要传递给前端JavaScript的单一变量
needed_variable_for_chart = 75
# 这是一个更复杂的数据结构，例如用于初始化图表数据
complex_chart_series = [
{"label": "销售额", "value": 1200, "color": "#4CAF50"},
{"label": "成本", "value": 800, "color": "#FF9800"},
{"label": "利润", "value": 400, "color": "#2196F3"},
]
context = {
'single_chart_value': needed_variable_for_chart,
'chart_series_data': complex_chart_series,
}
return render(request, 'my_chart_template.html', context)3.2 Django模板 (my_chart_template.html)
在模板中，使用json_script标签将Python变量嵌入到HTML中。json_script接受两个参数：要序列化的Python变量和该script标签的id属性。
{% load static %}
动态图表示例
我的动态图表
{# 使用json_script标签将Python变量安全地传递给JavaScript #}
{# 'single_chart_value' 将被序列化并存储在id为'neededVariableData'的script标签中 #}
{{ single_chart_value|json_script:"neededVariableData" }}
{# 'chart_series_data' 将被序列化并存储在id为'chartSeriesData'的script标签中 #}
{{ chart_series_data|json_script:"chartSeriesData" }}
在上面的例子中：
- {{ single_chart_value|json_script:"neededVariableData" }} 会在HTML中生成一个类似 的标签。
- {{ chart_series_data|json_script:"chartSeriesData" }} 会生成一个类似 的标签。
- 在JavaScript中，我们通过document.getElementById('id')获取到这些
4. 注意事项
- 可序列化数据类型： json_script只能处理Python中可以被JSON序列化的数据类型，包括字典、列表、字符串、数字、布尔值和None。如果你尝试传递自定义对象，你需要先将其转换为可序列化的基本类型（例如，通过自定义json.JSONEncoder或手动转换）。
- id的唯一性： json_script标签的第二个参数是生成
- 数据量： 尽管json_script非常方便，但如果需要传递的数据量非常大（例如，几MB甚至更多），直接嵌入HTML可能会导致页面加载缓慢。在这种情况下，更好的做法是使用AJAX请求（Fetch API或XMLHttpRequest）从后端API获取数据，以实现按需加载和更好的用户体验。
- 安全性考量： json_script标签本身已经处理了HTML和JavaScript的转义，大大降低了XSS风险。但在JavaScript代码中使用这些数据时，如果这些数据最终会被插入到DOM中（例如，作为HTML内容），仍然需要谨慎处理，特别是当数据来源于用户输入时，应考虑使用textContent而不是innerHTML，或者进行额外的DOM净化。
5. 总结
json_script模板标签是Django提供的一个强大且安全的工具，用于解决Python后端数据与前端JavaScript交互的常见难题。通过将Python变量序列化为JSON并嵌入到特定类型的
