Django传递null至前端被JS转成&39;null&39;的问题排查

首先咱们拆解下你遇到的问题根源，再给出针对性的解决办法：

为什么会出现带单引号的null？ #

你用json.dumps(None)得到的其实是双引号包裹的字符串"null"，但当你把这个字符串添加到Python列表graph_data后，整个列表在Django模板渲染时会被转换成Python的字符串表示形式（比如str(graph_data)）——这时候列表里的字符串元素就会被单引号包裹，变成['null', 'null']。

而Django默认会对模板中的上下文变量做HTML转义，这些单引号会被转义成'，最终前端拿到的就是['null', 'null']，flot.js自然无法识别这种格式，导致图表崩溃。

正确的处理方式 #

你有两种靠谱的解决思路：

方案1：在Python中直接用None，模板用json_script传递数据

在视图里，遇到断点时直接插入Python原生的None，不需要转成字符串：

for point in z_scores_total:
    if point != 'break':
        time = point.time
        graph_data.append([unix_time_millis(time), point.parameter_value])
    else:
        # 直接插入Python的None，不要转成字符串
        graph_data.append([None, None])

然后在模板中，使用Django官方推荐的json_script标签安全传递JSON数据：

{{ graph_data|json_script:"graph-data" }}

<script>
// 前端获取合法的JSON数据
var graphData = JSON.parse(document.getElementById('graph-data').textContent);
// 传给flot.js初始化图表
$.plot("#your-chart-container", [graphData], {/* 你的图表配置 */});
</script>

json_script会自动把Python序列转换成标准JSON字符串，同时避免HTML转义问题，是处理复杂JSON数据的最优解。

方案2：视图中提前转成JSON字符串，模板标记为安全

如果你更习惯直接传递JSON字符串，也可以在视图里提前完成序列化：

import json

# 构建graph_data的逻辑不变，最后转成JSON字符串
graph_data = []
for point in z_scores_total:
    if point != 'break':
        time = point.time
        graph_data.append([unix_time_millis(time), point.parameter_value])
    else:
        graph_data.append([None, None])

graph_data_json = json.dumps(graph_data)

return render(request, self.template_name, {'runs': runs, 'graph_data': graph_data_json})

然后在模板中用safe过滤器关闭HTML转义，让前端直接拿到合法的JSON：

<script>
// 直接使用，不需要额外解析
var graphData = {{ graph_data|safe }};
$.plot("#your-chart-container", [graphData], {/* 你的图表配置 */});
</script>

总结 #

核心问题在于你混淆了Python数据结构和JSON字符串的处理逻辑——Django模板不会自动把Python列表转换成JSON，直接传递包含字符串'null'的列表会被转义，而正确的做法是要么让Django帮你完成JSON序列化，要么自己提前序列化并关闭转义。

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