使用 Python Flask 將數據注入 javascript

Question

我按照http://www.highcharts.com/docs/getting-started/your-first-chart 中的說明創建示例圖表。 我已經在本地保存了 javascript 的主要部分，並在我的 html 中添加了<script src="/chart.js"></script>標簽來引用它。

在我這邊，我使用 python flask 來呈現包含腳本的 html 模板。

@app.route('/view', methods=['POST', 'GET'])
def show_graph_view():
    query= request.form['query']
    data = get_current_data(query)
    return render_template('graph.html', data=data)

我有一個函數來准備一些我想要繪制的自定義和當前數據，並且我希望在客戶端瀏覽器加載后數據可用。 如何將這些數據添加到圖表中？

Answer 1

假設一個全局可訪問的函數，只需在模塊中調用它，並在服務器上使用 tojson 和安全過濾器將數據轉換為 json。

<script type=text/javascript> doSomethingWith({{ data|tojson|safe }}); </script>

當您像這樣將服務器端模板和客戶端腳本混合在一起時，遵循邏輯有點困難。 但有時你必須這樣做。

Answer 2

在 2021 年偶然發現了這個舊答案，我只想添加另一個選項..

注入 Python 似乎與您的 Javascript 混亂，但您實際上可以這樣做：

<script>
    var names = []
    var i = 0
    // {% for i in range(0, names_len) %}      
        names[i++] = "{{names[i]}}";
    // {% endfor %}  
</script>

您可以“注釋掉”注入的 Pyhton 代碼，以便您的 Javascript 保持正確:)