将变量从 Flask 传递到 JavaScript

Posted

技术标签:

【中文标题】将变量从 Flask 传递到 JavaScript【英文标题】:Passing variables from Flask to JavaScript 【发布时间】:2016-09-12 14:04:42 【问题描述】:

我查看了类似的论坛,但无法让任何解决方案发挥作用。我正在尝试将变量从 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 文件中使用此代码。

【问题讨论】:

【参考方案1】:

mobiusklein 的答案非常好,但您应该考虑“黑客”。定义您的 Javascript 方法以接收参数并将数据作为参数发送到您的函数。

ma​​in.py

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

app.js

function myFunc(vars) 
    return vars

settings.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>

【讨论】:

这对我来说似乎很正常,而不是 hack。 vars/tojson:这挽救了我作为非网络开发人员的生命 :D 谢谢 @MauroBaraldi 不,我有 @context_processor 用于翻译字典,需要链接一些 js 单独文件,并且在该文件中需要使用 translations.somevar|tojson,这可能吗?跨度> 你的意思是data|tojson 仅供参考 - tojson 和其他过滤器的文档:jinja.palletsprojects.com/en/2.11.x/templates/#builtin-filters【参考方案2】:

通过@mauro 提到的简单示例将变量从flask 视图传递到模板到javascript 文件的简单方法。

ma​​in.py

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

settings.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

【讨论】:

这个答案只有在我将 data.username 更改为 data.username|tojson 后才对我有用(我正在传递名称包含斜杠的变量,例如“/example/name”,如果这很重要的话。) 按照下面的@joash 回答,变量应该被分配给烧瓶变量【参考方案3】:
<script type="text/javascript">
   var username =' data.username '
   var site =' data.site'
<script>

【讨论】:

【参考方案4】:

原因是需要使用 jinja2 来执行替换,而从您的代码中似乎没有发生这种情况。

您可能将 app.js 作为静态文件提供服务,这意味着模板引擎机器永远不会查看它,而是按原样提供。

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

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

【讨论】:

以上是关于将变量从 Flask 传递到 JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

如何在模板中将数据从 Flask 传递到 JavaScript?

将 JavaScript 变量传递给 Flask url_for

将参数从Javascript传递到flask python脚本[重复]

如何将 Json 数据从 javaScript 发送到 Flask

如何将变量和数据从 PHP 传递到 JavaScript?

如何将变量和数据从 PHP 传递到 JavaScript?