データを Flask からテンプレート内の JavaScript に渡すにはどうすればよいですか?

DDD
リリース: 2024-10-31 10:41:29
オリジナル
595 人が閲覧しました

How to Pass Data from Flask to JavaScript in a Template?

テンプレート内の Flask から JavaScript にデータを渡す

Flask では、render_template() 関数は HTML で使用するために変数をビューに渡します。しかし、同じテンプレート内で JavaScript にデータを渡すにはどうすればよいでしょうか?

Flask アプリが辞書を返す API を呼び出す次の例を考えてみましょう。目標は、Google Maps API で使用できるように経度と緯度の情報を JavaScript に渡すことです。

<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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!