ホームページ >ウェブフロントエンド >jsチュートリアル >Flask からテンプレート内の JavaScript にデータを渡すにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-10-29 03:40:29910ブラウズ

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

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

Flask アプリケーションでは、一般的な要件は、テンプレート内で Python から JavaScript にデータを渡すことです。テンプレート。このデータは、データベース クエリ、API 応答、またはその他のソースから発生する可能性があります。

これを実現する 1 つの方法は、Flask で使用されるテンプレート エンジンである Jinja2 を使用することです。 Jinja2 は、HTML テンプレート内に Python 式を埋め込む方法を提供します。式を二重中括弧 ({{ ) と ( }}) で囲むことにより、変数にアクセスしたり、操作を実行したり、制御構造を実行したりすることもできます。

Python 変数を JavaScript に渡すには、単に次のように含めることができます。テンプレートの script タグ内に含めます。たとえば、地理座標を表すタプルのリストが geocode 変数に格納されているとします。これらを次のように JavaScript に渡すことができます:

<code class="html"><script>
  var myGeocode = [{{ ', '.join(geocode) }}];
</script></code>

Jinja2 は、Python と JavaScript の統合を強化する追加機能を提供します。便利なフィルターの 1 つは tojson() で、これは Python オブジェクトを JSON 形式に変換します。このフィルターは、複雑なデータ構造を JavaScript に渡す場合に特に便利です。

tojson() を使用した例を次に示します。

<script>
  var myGeocode = {{ geocode | tojson }};
</script>

データが JavaScript に渡されると、アクセスして操作できます。 JavaScript のネイティブ データ型とメソッドを使用します。

以上がFlask からテンプレート内の JavaScript にデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。