将变量从flask传递给javascript

pan*_*ang 21 javascript python flask pubnub

我查看了类似的论坛,但无法使任何解决方案起作用.我试图将变量从flask传递到我的java脚本文件.然后,这些值将用于我的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'] )
Run Code Online (Sandbox Code Playgroud)

这是我的javascript代码(app.js)的一部分:

var settings = {
        channel: {{project_name}},
        publish_key: {{publish_key}},
        subscribe_key: {{subscribe_key}}
    };
Run Code Online (Sandbox Code Playgroud)

如果我在我的Settings.html文件中使用它而不是在app.js文件中,则此代码有效.

Mau*_*ldi 22

mobiusklein答案是相当不错的,但有"黑客",你应该考虑的问题.定义您的Javascript方法以接收参数并将数据作为参数发送到您的函数.

main.py

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

app.js

function myFunc(vars) {
    return vars
}
Run Code Online (Sandbox Code Playgroud)

settings.html

<html>
    <head>
         <script type="text/javascript" {{ url_for('static', filename='app.js')}}></script>
         <script type="text/javascript">
            myVar = myFunc({{vars|tojson}})
         </script>
    </head>
</html>
Run Code Online (Sandbox Code Playgroud)

  • 认为你的意思是“{{data|tojson}}”。 (16认同)
  • 这对我来说似乎很正常,而不是黑客攻击。 (4认同)
  • vars/tojson:这挽救了我作为非 Web 开发人员的生命 :D 谢谢 (2认同)
  • 仅供参考 - tojson 和其他过滤器的文档:https://jinja.palletsprojects.com/en/2.11.x/templates/#builtin-filters (2认同)

shr*_*nde 18

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

main.py

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

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>
Run Code Online (Sandbox Code Playgroud)

app.js

function myFunc() {
    return username + site
}
Run Code Online (Sandbox Code Playgroud)

  • 在我将`data.username`更改为`data.username | tojson`之后,这个答案对我有用(我传递的名称包含斜杠的变量,例如"/ example/name",如果这很重要.) (3认同)

joa*_*ash 6

<script type="text/javascript">
   var username ='{{ data.username }}'
   var site ='{{ data.site}}'
<script>
Run Code Online (Sandbox Code Playgroud)

  • 这很好用,但是在 vscode 上,javascript 检查器会对 jinja 的大括号感到愤怒。为了抑制警告,我将其添加到我的 settings.json 中:`"html.validate.scripts": false,` 这会抑制对 html 文件的 javascript 语法检查。 (2认同)

mob*_*ein 5

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

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

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

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