將資料從Flask 傳遞到範本中的JavaScript
在Flask 中,render_template() 函數將變數傳遞到視圖以在HTML中使用。但是,如何在同一模板中將資料傳遞給 JavaScript?
考慮以下範例,其中 Flask 應用程式呼叫傳回字典的 API。目標是將經度和緯度資訊傳遞給 JavaScript,以便與 Google Maps API 一起使用。
<code class="python">from flask import Flask, render_template app = Flask(__name__) @app.route('/') def get_data(): events = api.call(get_event, arg0, arg1) geocode = event['latitude'], event['longitude'] return render_template('get_data.html', geocode=geocode)</code>
解決方案
Flask 允許您使用 {{ 變數範本中任何位置的佔位符語法,包括 JavaScript 程式碼中。
要將地理編碼資料傳遞給JavaScript,只需包含它在{{ }} 佔位符內:
<code class="html"><script> var someJavaScriptVar = '{{ geocode[1] }}'; </script></code>
這會將geocode[1](經度)的值插入到JavaScript 變數someJavaScriptVar 中。
將資料作為陣列傳遞,您可以使用join() 函數:
<code class="html"><script> var myGeocode = [{{ ', '.join(geocode) }}]; </script></code>
這將產生以下內容JavaScript:
<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>
您也可以在{ { }} 佔位符中使用高階構造,例如for 迴圈和if 語句。更多詳細資訊請參閱 Jinja2 文件。
此外,您可以使用tojson 過濾器將Python 物件轉換為JSON 字串,可以直接在JavaScript 中使用:
<code class="html"><script> var myGeocode = {{ geocode|tojson }}; </script></code>
此方法提供一種在模板中將複雜數據結構從Flask 傳遞到JavaScript 的便利方法。
以上是如何在模板中將資料從 Flask 傳遞到 JavaScript?的詳細內容。更多資訊請關注PHP中文網其他相關文章!