Flask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法
- Linda Hamiltonオリジナル
- 2024-10-30 13:57:27975ブラウズ
テンプレート内の 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="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
Jinja2 フィルターを利用することもできます。辞書が JSON 形式の場合は、tojson フィルターを使用して JavaScript オブジェクトに変換できます:
<script>
var myGeocode = {{ geocode|tojson }};
</script>以上がFlask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。