Python烧瓶将变量传递给html文件在脚本标签下不起作用答案

【问题标题】：Python flask passing variable to html file not working under script tagPython烧瓶将变量传递给html文件在脚本标签下不起作用
【发布时间】：2017-05-25 05:04:08
【问题描述】：

我有一个 python 烧瓶应用程序，我需要创建一个 java 脚本条形图。我尝试了各种方法，并且我知道我的变量正在传递给 html 文件，因为我已将它们移动到 html 文件中的其他位置及其工作。我需要将这些变量传递到的地方是 html 文件中的脚本标记下。我对所有这些都是新手，是否需要进行一些特殊处理才能显示我的变量，以便可以构建图表？

不确定是否重要，但我传递的变量只是日期和数字。

# this is my python route that calls a function that fetches a date and a 
# number from mongodb. This data im trying to display in my graph.
@app.route('/meritgraph/')
def meritgraph():

score_graph_data, score_date = get_chart_data()

return render_template("graphing.html", chart_data=zip(score_date, 
score_graph_data))



# This is working for me but I want this to run inside a javascript tag.
<ol>{% for score_date, score_graph_data in chart_data %}
    <li>{{score_date|safe}} and {{score_graph_data}}</li>
    {% endfor %}
</ol>{%endblock%}

# for the example above I get the following return output.

Wed May 24 18:11:01 PDT 2017 and 100
Tue May 23 14:39:27 PDT 2017 and 77
Tue May 23 14:14:02 PDT 2017 and 62

# This is what I would like to do inside the script tag. Some reason when I 
# run it inside the script tag it wont work. Is there anything special I 
# need to do here?
<script type="text/javascript">

<ol>{% for score_date, score_graph_data in chart_data %}
    <li>{{score_date|safe}} and {{score_graph_data}}</li>
    {% endfor %}
</ol>{%endblock%}

</script>

【问题讨论】：

尝试用引号括起来 '{{score_date}}' '{{score_graph_data}}'
不，那没有用。我试过了，还是一样。我看到图表背景但是图表数据没有通过。
有引号吗？
我给了这样的
"dataProvider": [ { "category": '{{score_date}}', "column-1": '{{score_graph_data}}' }, ]

标签： javascript python html python-3.x flask

【解决方案1】：

你的逗号有点搞砸了。试试下面的。如果这不起作用，请提供有关您遇到的错误的更多信息（可能在 JavaScript 执行中）

<script type="text/javascript">
    AmCharts.makeChart("chartdiv",
        {
            "type": "serial",
            "categoryField": "category",
            "dataDateFormat": "YYYY-MM-DD",
            "startDuration": 1,
            "theme": "dark",
            "categoryAxis": {
                "gridPosition": "start",
                "parseDates": true
            },
            "chartCursor": {
                "enabled": true
            },
            "chartScrollbar": {
                "enabled": true
            },
            "trendLines": [],
            "graphs": [
                {
                    "fillAlphas": 1,
                    "id": "AmGraph-1",
                    "title": "graph 1",
                    "type": "column",
                    "valueField": "column-1"
                }
            ],
            "guides": [],
            "valueAxes": [
                {
                    "id": "ValueAxis-1",
                    "title": "score range"
                }
            ],
            "allLabels": [],
            "balloon": {},
            "titles": [
                {
                    "id": "Title-1",
                    "size": 15,
                    "text": "Merit Score Chart"
                }
            ],
            "dataProvider": [
                {% for score_date, score_graph_data in chart_data %}
                    {
                        "category": '{{score_date|safe}}',
                        "column-1": '{{score_graph_data}}'
                    }
                    {{ "," if not loop.last }}
                {% endfor %}
            ]
        }
    );
</script>

【讨论】：

感谢您指出语法错误。我试过了，但我仍然遇到返回图表但没有值的相同问题。我不确定谁来检查是否有任何 javascript 错误，因为页面加载正常，图表中没有任何数据。
codex.wordpress.org/… - 本网站的第 3 步提供了有关如何在各种浏览器中打开控制台的说明。您应该在那里看到任何 JavaScript 错误
非常感谢，让我检查一下，看看是否能找到任何错误。
感谢您的建议。我实际上是从浏览器内部运行 java 脚本控制台。不幸的是，我实际上没有收到任何错误。在玩了这个之后，我看到的是当我没有脚本标签时这是有效的。我观察到的行为基本上是没有返回列表值，并且好像变量只是空的。
谢谢，这看起来让事情进展得更进一步了。我检查了浏览器控制台，看到以下错误。 “SyntaxError: missing ) after argument list chart_sandbox:59:28” 我检查了代码，有一个左括号和一个右括号，所以不知道为什么它抱怨一些语法错误。

【解决方案2】：

尝试按照以下示例更改 jinja 脚本中的语法： {{score_date}} 到 <%=score_date%>

【讨论】：

不抱歉，我尝试了该语法并遇到了同样的问题。

【解决方案3】：

karthick 至少在我的经验中是正确的，脚本标签中的 jinja 需要用引号引起来。最重要的是，您不应该将 html 标签放在脚本标签中，您应该使用 document.all 或 document.getElementById 函数。

【讨论】：