Flask传递数组至JavaScript遇Uncaught SyntaxError错误求助

这个问题我当初刚用Flask的时候也踩过坑，核心原因是Jinja2默认会对变量进行HTML转义——把单引号、双引号这类特殊字符转换成'这类HTML实体，本来是为了防止XSS攻击，但这就导致JavaScript没法正确解析这个数组了。

给你两个靠谱的解决办法，按推荐程度排序：

1. 使用tojson过滤器（首选） #

tojson是Flask/Jinja专门提供的工具，能把Python对象转换成合法的JSON字符串，自动处理所有转义逻辑，输出的内容JavaScript可以直接识别成数组对象，而且安全性拉满。

操作步骤： #

首先在Python视图函数里，把数组改成标准的Python数据结构（把你给的JS格式转成Python字典列表）：

array = [
    {"country": "Macediona", "city": ["Skopje", "Ohrid", "Bitola"]},
    {"country": "Switzerland", "city": ["Bazel", "Zurich", "Zeneva"]},
    {"country": "Srbia", "city": ["Nis", "Belgrad"]}
]
return render_template("你的模板文件名.html", array=array)

然后在HTML模板的JavaScript部分这么写：

var list = {{ array|tojson }};

这样Jinja会自动把Python数组转换成合法的JSON格式，JavaScript直接就能用，完全不会有转义问题。

2. 使用safe过滤器（仅无用户输入时用） #

如果你能100%确定数组里的内容都是自己写的，没有任何用户输入的内容（避免XSS风险），也可以用safe过滤器告诉Jinja：这个变量不用转义！

写法是这样的：

var list = {{ array|safe }};

但一定要注意：如果数组里包含用户提交的内容，绝对不能用这个方法，否则可能会引入XSS漏洞，所以还是优先选第一种方法。

为什么原来的写法会报错？ #

当你直接写var list = {{ array }}时，Jinja会把Python数组转成字符串，同时把所有单引号替换成'，最终输出到页面的内容会变成：

var list = [{ 'country': 'Macediona', city: ['Skopje', ...] }];

JavaScript解析时看到'这种HTML实体，就会认为是非法语法，自然抛出Unexpected token &的错误。

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