将变量从Flask传递到JavaScript

Passing variables from Flask to JavaScript

本文关键字：JavaScript Flask 变量      更新时间：2023-09-26

我看了类似的论坛，但没有找到任何解决方案。我正在尝试将Flask中的变量传递到我的JavaScript文件中。然后，这些值将用于我的JavaScript文件中的PubNub。

以下是我的Python代码的一部分：

@app.route("/mysettings/")
def user_settings(): 
        return render_template('Settings.html',  project_name = session['project_name'] , publish_key = session['publish_key'] , subscribe_key = session['subscribe_key'] )

以下是我的JavaScript代码（app.js）的一部分：

var settings = {
        channel: {{project_name}},
        publish_key: {{publish_key}},
        subscribe_key: {{subscribe_key}}
    };

如果我在Settings.html文件中使用它，但在app.js文件中不使用，则此代码有效。

mobiusklein的答案很好，但有"破解"；你应该考虑一下。定义您的Javascript方法以接收params并将数据作为params发送到您的函数。

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackoverflow.com'}
    return render_template('settings.html', data=data)

app.js

function myFunc(vars) {
    return vars
}

设置.html

<html>
    <head>
         <script type="text/javascript" {{ url_for('static', filename='app.js')}}></script>
         <script type="text/javascript">
            myVar = myFunc({{data|tojson}})
         </script>
    </head>
</html>

将变量从flask视图传递到模板到javascript文件的简单方法，@maro提到了一个简单的例子。

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackoverflow.com'}
    return render_template('settings.html', data=data)

设置.html

<html>
    <head>
         <script type="text/javascript">
            var username = {{ data.username }}
            var site = {{ data.site }}
        </script>
        <script type="text/javascript" src="app.js"></script>
    </head>
</html>

app.js

function myFunc() {
    return username + site
}

<script type="text/javascript">
   var username ='{{ data.username }}'
   var site ='{{ data.site}}'
<script>

原因是需要使用jinja2来执行替换，而从您的代码来看，这似乎没有发生。

很可能您将app.js作为一个静态文件提供，这意味着模板引擎机器永远不会查看它，只是按原样提供

您可以通过从URL提供app.js来完成所描述的内容，该URL与通过Flask的render_template函数传递app.js内容的操作绑定，执行jinja2替换和所有其他自定义信息，但这意味着jinja2必须解析整个文件，这可能很昂贵。

您可以尝试使用AJAX请求传递这些变量，AJAX请求由一个以JSON形式发回相同数据的操作响应。这是一种更常见的做法，并且具有使数据对其他资源可见的附加值。

在这种情况下，您实际上不需要使用render_template（）发送数据，因为您的数据已经存储在会话中。您的会话数据已可用于jinja2模板。（您可能无法从app.js导入。您可能需要在"Settings.html"中明确包含所有代码。）

main.py

@app.route("/mysettings/")
def user_settings(): 
    return render_template('Settings.html')

设置.html

<script type="text/javascript">
var settings = {
    channel: {{ session.project_name }},
    publish_key: {{ session.publish_key }},
    subscribe_key: {{ session.subscribe_key }}
};
</script>
相关文章：