JavaScript使用Jinja模板中呈现的数据引发SyntaxError

Question

JavaScript使用Jinja模板中呈现的数据引发SyntaxError我正在尝试将数据作为JSON从一个Flask路由传递到一个Jinja模板来呈现JavaScript。我想使用JavaScript迭代数据。浏览器显示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

烧瓶的Jinja环境自动转义HTML模板中呈现的数据。这是为了避免在dev尝试呈现不受信任的用户输入时出现安全问题。

由于您要传递一个Python对象作为JSON来处理，所以Flask提供了tojson过滤器，它自动将数据转储到JSON并将其标记为安全。

return render_template('tree.html', tree=tree)

var tree = {{ tree|tojson }};

当您只查看以HTML呈现的数据时，它看起来是正确的，因为浏览器将转义符号显示为真正的符号(虽然在本例中，您看到的是Pythondict的字符串表示，而不是JSON，所以仍然存在一些问题，如u标记)。

以前版本的Flask没有标记转储数据安全，所以您可能会遇到这样的例子{{ tree|tojson|safe }}，这不再是必需的了。

---

如果您没有呈现JSON(或者您已经将JSON转储到一个字符串中)，您可以告诉Jinja使用safe过滤器。

# already dumped to json, so tojson would double-encode itreturn render_template('tree.html', tree=json.dumps(tree))

var tree = {{ tree|safe }};

您也可以将字符串包装在Markup在呈现之前，它相当于safe过滤器。

# already dumped and marked safereturn render_template('tree.html', tree=Markup(json.dumps(tree)))

var tree = {{ tree }};

---

如果不是将数据传递给JavaScript，而是在Jinja中使用数据，则不需要JSON。传递实际Python数据，不要调用tojson并将其作为模板中的任何其他数据使用。

return render_template('tree.html', tree=tree)

{% for item in tree %}    <li>{{ item }}</li>{% endfor %}

Answer 2

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

而不是使用

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

试一试

return flask.jsonify(**tree)