Flask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法-Python チュートリアル-php.cn

Flask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法

Linda Hamilton

リリース： 2024-10-30 13:57:27

オリジナル

982 人が閲覧しました

How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

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

問題: JavaScript コードで API 呼び出しから取得した辞書を利用したいFlask テンプレート内で、特に、long/lat タプルを Google Maps API に渡すために使用します。

解決策:

テンプレート内の Flask から JavaScript に変数を渡すには、次のようにします。 {{ 変数 }} 構文はその中のどこでも使用できます。たとえば、get_data.html テンプレート内:

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>
</body>
</html>

ログイン後にコピー

これにより、JavaScript 変数の割り当てを含む HTML 出力が生成されます。

リストを JavaScript に渡すには、以下を作成する必要があります。出力内の配列定義:

<html>
  <head>
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])">Click me</button>
  </body>
</html>

ログイン後にコピー

Jinja2 は高度な Python 構造もサポートしています。たとえば、上記は次のように短縮できます:

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick=&quot;alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])&quot; />
</body>
</html>

ログイン後にコピー

Jinja2 フィルターを利用することもできます。辞書が JSON 形式の場合は、tojson フィルターを使用して JavaScript オブジェクトに変換できます:

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

ログイン後にコピー

以上がFlask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

Flask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法

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