在外部 Javascript 中使用 Python Flask 传递参数

IT技术 javascript python flask
2021-01-16 21:42:39

我在我的网站上使用 Python Flask，并将几个参数传递给 Javascript。这是我的代码：

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route("/")
def index():

    return render_template("index.html", param1="Hello")


<html>
   <head>
   </head>
   <body>
      <p>Hello World</p>
   </body>
   <script>console.log({{param1}})</script>
</html>

通过这种方式，它可以毫无问题地工作。这个例子是我自己的简化版。但是，如果我想将脚本放在外部文件上并像这样调用它：

<html>
   <head>
   </head>
   <body>
      <p>Hello World</p>
   </body>
   <script src="/static/js/myjs.js"></script>
</html>

并且myjs.js文件是console.log({{param1}})，那么它不起作用。那么，有什么方法可以使用 Python Flask 在外部 Javascript 文件中传递参数吗？

2个回答

如果你想用 Jinja 渲染一个文件，你需要调用render_template它并向它传递所需的值。只是直接链接到静态文件显然不会这样做。一种解决方案是使用 Jinja 的include块。这要求“myjs.js”位于“templates/js”文件夹中，并将其包含在呈现的模板中，将所有模板上下文传递给包含的模板。

<script>{% include 'js/myjs.js' %}</script>

该更好的解决方案是不需要渲染在每次请求的JS，而是从你的模板参数传递给JS的功能。

<script src="{{ url_for('static', filename='js/myjs.js') }}"></script>
<script>
    my_func({{ my_var|tojson }});
</script>

我使用了不同的方式来加载 html 页面中指定的 javascript 文件：

首先，我在<head></head>标签内定义了一些变量，所以我调用了我的 javascript 文件：

<head>
...
<script src="/static/js/jquery.js"></script>
<script  type=text/javascript>
    $(document).ready(function() {
        $link_subcat = "{{ url_for('load_subcategories') }}";
        $link_cat = "{{ url_for('load_categories') }}";
    });
</script>

<script src="{{ url_for('static', filename='finances.js') }}"></script>
...

这是我的 javascript 文件内容：

$(document).ready(function() {

    $("#category").change(function() {
        $.ajax({
            type: "POST",
            url: $link_subcat,
            data: {cat: $(this).val()},
            success: function(data) {
                $("#subcategory").html(data);
            }
        });
    });

    $("input[name=type]").change(function() {
        $.ajax({
            type: "POST",
            url: $link_cat,
            data: {type: $('input[name="type"]:checked').val()},
            success: function(data) {
                $("#category").html(data);
            }
        });
    });

});

这种方法对我有用。

其它你可能感兴趣的问题
上一篇从服务器下载文件的最佳方式是什么 下一篇Chrome 扩展：端口错误：无法建立连接。接收端不存在。