Flask からテンプレート内の JavaScript にデータを渡すにはどうすればよいですか?-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-31 02:29:29

オリジナル

697 人が閲覧しました

How to Pass Data from Flask to JavaScript in Templates?

テンプレート内の 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 サイトの他の関連記事を参照してください。