JavaScript在Jinja模板中引发JSON渲染SyntaxError

我试图从一个Flask路由传递数据作为JSON到Jinja模板渲染JavaScript。 我想用JavaScript来迭代数据。 浏览器显示SyntaxError: Unexpected token '&'. Expected a property name. SyntaxError: Unexpected token '&'. Expected a property name. 当在呈现的数据上调用JSON.parse时。 如何在JavaScript中使用呈现的JSON数据?

 var obj = JSON.parse({{ data }}) for (i in obj){ document.write(obj[i].text + "<br />"); } 
 def get_nodes(node): d = {} if node == "Root": d["text"] = node else: d["text"] = node.name getchildren = get_children(node) if getchildren: d["nodes"] = [get_nodes(child) for child in getchildren] return d tree = get_nodes("Root") return render_template("folder.html", data=tree) 

如果我只是把{{ data }}放在HTML部分,我看到的是正确的。

 {'text': 'Root', 'nodes': [{'text': u'Prosjekt3'}, {'text': u'Prosjekt4', 'nodes': [{'text': u'mappe8'}]}]} 

Flask的Jinja环境会自动转义HTML模板中呈现的数据。 这是为了避免安全问题,如果开发人员尝试渲染不可信用户input。

由于您传递的Python对象被视为JSON,因此Flask提供了tojsonfilter,它自动将数据转储为JSON并将其标记为安全。

 return render_template('tree.html', tree=tree) 
 var tree = {{ tree|tojson }}; 

当你只是看HTML中呈现的数据时,它看起来是正确的,因为浏览器将转义的符号显示为真正的符号(虽然在这种情况下,你看到的是Python字典的string表示,而不是JSON,所以仍然存在一些问题像u标记)。

以前的Flask版本没有标记转储的数据安全,所以你可能会遇到像{{ tree|tojson|safe }}这样的{{ tree|tojson|safe }} ,这是不再需要的。


如果您不渲染JSON(或者已经将JSON转储为string),则可以通过使用safe筛选器告诉Jinja数据是否安全呈现,而不会转义。

 # already dumped to json, so tojson would double-encode it return render_template('tree.html', tree=json.dumps(tree)) 
 var tree = {{ tree|safe }}; 

在渲染之前,您也可以在Markup包装string,这相当于safefilter。

 # already dumped and marked safe return render_template('tree.html', tree=Markup(json.dumps(tree))) 
 var tree = {{ tree }}; 

问题是你的服务器返回的不是JSON,而是呈现HTML,它用&符号转义了一些符号。

而不是使用

 return render_template("folder.html", data=tree) 

尝试

 return flask.jsonify(**tree)