尝试将数据从Flask传递到Javascript时出现意外标记“{”

shstlldc  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(131)

你好,我正在开发一个应用程序使用 flask 。从一个页面,我想捕捉一个变量在我的Javascript。

** flask **

@Cov19_msc.route("/page2", methods=['GET', 'POST'])
def page2():
    user_data = {
        "email": "user_mail",
        "name": "John"
    }
    return render_template("/page2.html", user_data=user_data)

Javascript语言

$(document).ready(function() {
    console.log( "ready!" );
    var u_data= {{ user_data|tojson }};
    console.log(u_data);
});

不幸的是,我得到immediatly这个错误:

Uncaught SyntaxError: Unexpected token '{' (at test.js:3:18)

然而,我读到这个解决方案应该像在这篇文章:i cant pass data from python flask api to javascript by tojson
你能告诉我哪里错了吗?

编辑1:

应用程序的HTML部分使用jinja 2进行管理

html_模板.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyApp</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/my_style.css') }}">
</head>
<body>
     <div>
        <div class="container-fluid" id="whole_screen">
             
             {% block content %}

             {% endblock %}

         </div>
    </div>
    <script type=text/javascript src="{{  url_for('static', filename='js/test.js') }}"></script>
</body>
</html>

第二页. html

{% extends "html_template.html" %}
{% block content %}
<div>
    <p>{{user_data}}</p>
</div>
{% endblock content %}

test.js是在html模板的主体中作为脚本调用的,html模板是由page2.html使用的,因此我认为test.js也在page 2中运行。
虽然这对我来说很奇怪,但我看到了{{ }}在javascript和jinja的 flask 应用程序中的用法。一些例子发布在Stackoverflow上(我在这个问题中只转发了其中一个)

gjmwrych

gjmwrych1#

javascript代码中的双括号{{没有任何意义,它抱怨第二个花括号。
您需要更改var u_data= {{ user_data|tojson }};这一行或将其完全删除。user_data不是已经是JSON格式了吗?
编辑:
在提供页面之前,Flask应该为JS解释它吗?这个JS是在一个单独的文件中吗?也许它应该在Flask模板中。
你给JS的链接是在页面的模板中,而不是一个单独的文件。

相关问题