JSON将Flask编码为Javascript [重复]答案

【问题标题】：JSON encoding Flask to Javascript [duplicate]JSON将Flask编码为Javascript [重复]
【发布时间】：2016-10-17 08:30:35
【问题描述】：

我正坐在一个基于 Flask 的网络应用程序上。理论上，我想从磁盘加载一个 JSON 文件并将其提供给网站上的 javascript。

def getData():
    check_for_update()
    with open(LOCAL_file,"rb") as myfile:
        data = json.load(myfile)
    udate = data["today"] 
    return (udate, data)

然后我将它发送到页面

return render_template('./index2.html', udate = thisdata[0], data = json.dumps(thisdata[1]))

现在我只是在页面上尝试

<script>
var myjson = JSON.parse({{data}})
</script>

然后导致类似这样的结果

这无法解析。当我复制并粘贴它时，它工作正常，python 也不会抱怨。

【问题讨论】：

您在这里有两个不同的问题，并且依次遇到它们，这使得很难将其作为重复项关闭。他们是：1.Mustache JS Templating - How do I embed a variable in a script tag string? 2.I keep getting “Uncaught SyntaxError: Unexpected token o”
@Quentin：这不是 Mustache 模板。默认的 Flask 模板引擎 Jinja2 也使用 {{..}} 占位符。并且 OP 只是忘记禁用标准的 HTML 转义。
在 HTML 中产生的输出仍然是 text。最好将其作为文本粘贴到此处而不是使用图像，因为无法复制或搜索图像内容。

标签： javascript python json flask

【解决方案1】：

data 是 HTML 转义，因为 Jinja2 默认会转义所有内容以安全地嵌入 HTML 页面。

最好不要在视图中编码为 JSON，而是在模板中执行此操作，并使用 Flask tojson 和 safe 过滤器。

所以在视图中传入thisdata[1]未编码：

return render_template(
    './index2.html', udate=thisdata[0], data=thisdata[1])

在视图中：

<script>
var myjson = {{ data|tojson|safe }};
</script>

tojson 生成的 JSON 数据也是 HTML 安全的（尽管带有 " 引号，因此不适合嵌入 HTML 标记属性中），safe 过滤器可用于关闭HTML 编码。此处无需使用JSON.parse()，tojson 生成的 JSON 是严格的 JavaScript 子集。

请参阅 API 文档中的 JSON Support section：

json 模块的htmlsafe_dumps() 函数在 Jinja2 中也可用作名为 |tojson 的过滤器。请注意，在script 标签内不能进行转义，因此如果您打算在script 标签内使用|safe，请确保禁用转义[.]

以及 Flask 模板文档的 Standard Filters section：

tojson()
此函数将给定对象转换为 JSON 表示。例如，如果您尝试动态生成 JavaScript，这将非常有用。

【讨论】：