Flask应用中从app.py向HTML页面传递JSON数据的问题

这个问题很常见，原因是Jinja2模板引擎默认会自动转义HTML特殊字符——你的imgs是一个Python列表/字典结构，Jinja2把它转换成字符串输出时，会把双引号转成"（HTML实体），导致JavaScript把它当成了普通字符串，而不是可识别的数组对象。

最推荐的解决方案：使用tojson过滤器 #

Flask的Jinja2内置了tojson过滤器，它会把Python数据结构转换成合法的JSON格式，同时避免不必要的HTML转义，直接让JavaScript识别为对象/数组。

修改你的HTML脚本部分：

<script>
console.log("HI")
var foo = {{ foo }}
console.log(foo)
// 使用tojson过滤器处理imgs
var images = {{ imgs|tojson }}
console.log(images)
</script>

这样输出的images会是标准的JSON数组，JavaScript可以直接使用，不需要额外解析。

为什么foo能正常工作？ #

因为foo是数字类型，Jinja2输出时就是纯数字，没有需要转义的特殊字符，所以JavaScript可以直接识别为数值变量。而imgs是复杂数据结构，默认转义后变成了带HTML实体的字符串，自然无法被JS识别为数组。

备选方案：safe过滤器（谨慎使用） #

如果你确认imgs中的数据完全安全（没有用户输入或不可信内容），也可以用safe过滤器关闭转义：

var images = {{ imgs|safe }}

但这个方法不如tojson可靠，因为safe只是简单关闭转义，不会确保输出是合法的JSON；而tojson会严格按照JSON规范处理数据，避免语法错误。

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