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

问题描述：

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

我知道的参数可以通过使用{{ params |safe }}为HTML，但我试图找出如何做到这一点，使custom.js将接收的参数（词和权重的字典，在这种情况下）和字云可以动态呈现。

预先感谢您！

基于努尔然建议的链路上@，我修改了app.py代码为：'''的tps = [{ '文本'： '甚至'， '尺寸'：180}，{“文本'：'很棒'，'尺码'：49} ] return render_template（'results3.html'，tps = tps）'''。作为函数myFunc（tps）{return tps;} d3.layout.cloud（）。size（[300，300]） .words（tps） .rotate （0）.....'''我的HTML脚本部分为''' '''。我究竟做错了什么？ – bluetooth

tps应该是字典{...}，而不是列表[...]。在'{{tps |安全}}'将'safe'改为'tojson'。 – Nurjan

答

如果我正确地理解了你，你需要在烧瓶后端创建一个视图函数（一个路由），并且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)

编辑：

您可以从烧瓶数据传递到HTML模板使用标准的脚本部分Jinja2的符号：

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

我可能没有正确解释问题。我想要做的是将一个变量传递给一个JavaScript而不是一个HTML文档。我们可以通过在HTML中放置'{{foo | safe}}'将变量'foo'传递给HTML，但是如果我想传递变量'foo'的javascript是我''。在这里，我想将一个变量传递给'medley.js'。 – bluetooth

@bluetooth我编辑了答案。您可以像往常一样使用标准jinja2表示法将数据发送到html模板的内部脚本标记。如果这不能解决你的问题，那么看看这个帖子可能已经回答了你的问题。 https://*.com/questions/37259740/passing-variables-from-flask-to-javascript – Nurjan

我试过你的建议，但没有奏效。所以，我在你提供的链接中尝试了这个建议，但那也没有奏效。我只是给我的问题添加了一条评论，请解释一下。如果你能看一下，我将不胜感激。谢谢！ – bluetooth

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

相关推荐