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

【问题标题】：JavaScript raises SyntaxError with data rendered in Jinja templateJavaScript 使用 Jinja 模板中呈现的数据引发 SyntaxError
【发布时间】：2016-06-03 23:34:21
【问题描述】：

我正在尝试将数据作为 JSON 从 Flask 路由传递到呈现 JavaScript 的 Jinja 模板。我想使用 JavaScript 遍历数据。当在渲染数据上调用 JSON.parse 时，浏览器会显示 SyntaxError: Unexpected token '&'. Expected a property name.。如何在 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'}]}]}

【问题讨论】：

标签： javascript python flask

【解决方案1】：

我可以使用以下代码示例将其存档。

<script>
    console.log(JSON.parse({{json|safe}}))
</script>

【讨论】：

【解决方案2】：

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

由于您传递的 Python 对象被视为 JSON，因此 Flask 提供了 tojson 过滤器，该过滤器自动将数据转储到 JSON 并将其标记为安全。

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

var tree = {{ tree|tojson }};

当您只查看以 HTML 呈现的数据时，它看起来是正确的，因为浏览器将转义符号显示为真正的符号（尽管在这种情况下，您看到的是 Python dict 的字符串表示，而不是 JSON，所以有还有一些问题，例如u 标记）。

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

如果您没有渲染 JSON（或者您已经将 JSON 转储为字符串），您可以使用 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中，相当于safe过滤器。

# already dumped and marked safe
return 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 %}

【讨论】：

【解决方案3】：

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

而不是使用

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

试试

return flask.jsonify(**tree)

【讨论】：