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'}]}]} 

Answer 1

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 }}; 

Answer 2

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

而不是使用

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

尝试

 return flask.jsonify(**tree)