将数据从烧瓶传递到javascript时JSON中的意外令牌{答案

【问题标题】：Unexpected token { in JSON while passing data from flask to javascript将数据从烧瓶传递到javascript时JSON中的意外令牌{
【发布时间】：2018-03-12 17:44:31
【问题描述】：

我正在尝试将简单数据从烧瓶传递到 javascript 文件我正在关注这个答案 Passing a JSON object from Flask to JavaScript

但我得到了 Uncaught SyntaxError: Unexpected token { in JSON at position 1 在 JSON.parse() 处

var user = JSON.parse('{{ data | tojson}}');      
 var grade=user.grade;
 console.log(grade);

我的python文件有代码

@app.route("/quiz/0")
def quizFirst():
    data={"grade":"0"}
    return render_template('quiz.html',data=data)

js 文件中的 javascript 无法识别令牌 {，知道我缺少什么。

【问题讨论】：

是 quiz.html 中的 JavaScript 还是在单独的 .js 文件中？
js 文件是一个单独的文件，不在 quiz.html 中
好吧，这总是会失败var user = JSON.parse('{{ data | tojson}}'); 我不知道这是否意味着要以某种方式被替换，但正如所写的那样，它实际上会尝试解析该字符串。所以 JSON.parse 看到 {{ 并立即出错。
所以把javascript放在里面是唯一的选择，所以我能和我的js文件通信吗？
好吧，我想通了，HTML文件中javascript中的任何变量都可以被外部（单独的）js文件访问，前提是在使用之前声明了该变量，因为单独文件的链接必须在下面html javascript

标签： javascript python flask

【解决方案1】：

它对我有用。此 JavaScript 需要在 quiz.html 内。原因是 Flask 会处理quiz.html 并将{{ data | tojson }} 替换为render_template 中提供的数据。但是，它不会处理您的静态 JS 文件。

quiz.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>sotest</title>
</head>
<body>

  Hello World!

<script>
  var user = JSON.parse('{{ data | tojson}}');      
  var grade=user.grade;
  console.log(grade);
</script>

</body>
</html>

app.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/quiz/0")
def quizFirst():
    data={"grade":"0"}
    return render_template('quiz.html',data=data)

if __name__ == "__main__":
    app.run(debug=True)

【讨论】：