通过 HTML 从 Python Flask 应用程序将参数传递给 Javascript 文件答案

【问题标题】：Passing parameter(s) to Javascript file from Python Flask app through HTML通过 HTML 从 Python Flask 应用程序将参数传递给 Javascript 文件
【发布时间】：2017-11-21 02:36:08
【问题描述】：

我正在构建一个基于 Python/Flask 的网络应用程序。 python 脚本生成一个单词字典及其相应的权重。我有一个 javascript 文件（我们称之为 custom.js），我从 output.html 中调用它。这个 javascript 的工作方式是它使用这个字典，然后使用 d3.v3.min.js 和 d3.layout.cloud.js 创建一个 wordcloud。当字典被硬编码为custom.js 时，输出文件会显示 wordcloud。但是，字典值将根据 python 脚本中的其他参数而改变。因此，我想将这本字典从 Python 传递给custom.js。我不知道该怎么做。

我知道可以使用{{ params |safe }} 将参数传递给HTML，但我正在尝试弄清楚如何做到这一点，以便custom.js 将接收参数（在这种情况下是单词和权重的字典）和词云可以动态呈现。

提前谢谢你！

【问题讨论】：

根据@Nurzhan的建议链接，我将app.py代码修改为：tps = [ {'text': 'even', 'size': 180}, {'text': 'great', 'size': 49}] return render_template('results3.html',tps=tps)。向我的custom.js 添加了一个函数为function myFunc(tps) {return tps;} d3.layout.cloud().size([300, 300]) .words(tps) .rotate(0)..... 和我的HTML 的脚本部分为``` ```.我做错了什么？
tps 应该是字典 {...}，而不是列表 [...]。在{{ tps | safe }} 中将safe 更改为tojson。

标签： javascript python flask

【解决方案1】：

您可以尝试在模板 html 中定义一个 var，如下所示：

<script>
        var your_var = '{{ value }}'
</script>

然后在外部 js 文件中使用“your_var”。但请确保上述定义位于您的 js 文件引用之前。

【讨论】：

【解决方案2】：

如果我对您的理解正确，您需要在烧瓶后端创建一个视图函数（路由），其 url 类似于 /get_dictionary。该函数可能如下所示：

来自烧瓶导入请求，jsonify ...

@app.route('/get_dictionary'):
def get_dictionary():
    ...
    your_dictionary = []
    # Fill in your_dictionary with data
    ...
    render_template('your_template.html', your_dictionary=your_dictionary)

编辑：

您可以使用标准 jinja2 表示法将数据从烧瓶传递到 html 模板的脚本部分：

<html>
<head>
  <script>
    your_dictionary = {{ your_dictionary | tojson }}
    <!-- Do what you need with your_dictionary -->
  </script>  
  ...
</head>
...

【讨论】：

我可能没有正确解释这个问题。我想要做的是将变量传递给 javascript 而不是 HTML 文档。我们可以通过将{{ foo|safe }} 放入HTML 来将变量foo 传递给HTML，但是如果我想将变量foo 传递到的javascript 是<script> 标签的一部分，我该怎么做？ <script src="{{url_for('.static', filename='js/medley.js')}}"></script>。在这里，我想将一个变量传递给medley.js。
@bluetooth 我编辑了答案。您可以像往常一样使用标准 jinja2 表示法将数据发送到 html 模板的内部脚本标记。如果这不能解决您的问题，请查看可能已经回答了您的问题的这篇文章。 stackoverflow.com/questions/37259740/…
我试过你的建议，但没有奏效。因此，我尝试了您提供的链接中的建议，但也没有用。我刚刚对我的问题添加了评论，所以请解释一下。如果您能看一下，我将不胜感激。谢谢！