ホームページ > 記事 > ウェブフロントエンド > Flask からテンプレート内の JavaScript にデータを渡すにはどうすればよいですか?
Flask からテンプレート内の JavaScript にデータを渡すにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-10-31 02:29:29600ブラウズ
テンプレート内の Flask から JavaScript にデータを渡す
Flask を使用する場合、JavaScript による操作のためにバックエンドからフロントエンドにデータを渡すことが必要になることがよくあります。これは、テンプレートのレンダリングを通じて実現できます。
JavaScript にデータを渡す
Flask で使用される Jinja2 テンプレート エンジンを使用すると、テンプレート内で Python 変数に直接アクセスできます。 Python から JavaScript に変数を渡すには、変数を二重中括弧 {{ }} で囲むだけです。
<code class="html"><head>
<script>
var myVariable = '{{ my_python_variable }}';
</script>
</head></code>
例: 地理空間データの受け渡し
を渡す次のシナリオを考えてみましょう。テンプレート内の Google Maps API への地理座標の辞書:
<code class="python"># Assuming 'events' is a dictionary
geocode = event['latitude'], event['longitude']
return render_template('my_template.html', geocode=geocode)</code>
このデータを JavaScript で利用できるようにするには、Jinja2 を使用できます:
<code class="html"><head>
<script>
var lat = '{{ geocode[0] }}';
var lng = '{{ geocode[1] }}';
</script>
</head></code>
代替: tojson フィルターを使用する
Jinja2 は、Python オブジェクトを JSON 文字列に変換する tojson フィルターを提供します。これは、JavaScript 変数に直接埋め込むことができます:
<code class="html"><script>
var geocode = {{ geocode|tojson }};
</script></code>以上がFlask からテンプレート内の JavaScript にデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。