Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat dan Gunakannya dengan Peta Google?

Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat dan Gunakannya dengan Peta Google?

Linda Hamiltonasal: 2024-10-30 13:57:27968semak imbas

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

Mengirim Data dari Flask ke JavaScript dalam Templat

Isu: Anda ingin menggunakan kamus yang diambil daripada panggilan API dalam kod JavaScript anda dalam templat Flask, terutamanya untuk menghantar tupel panjang/lat ke API Peta Google.

Penyelesaian:

Untuk menghantar pembolehubah daripada Flask ke JavaScript dalam templat, anda boleh menggunakan sintaks {{ pembolehubah }} di mana-mana sahaja di dalamnya. Contohnya, dalam templat get_data.html anda:

<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>

Ini menjana output HTML yang mengandungi tugasan pembolehubah JavaScript.

Untuk menghantar senarai kepada JavaScript, anda perlu membuat definisi tatasusunan dalam output anda:

<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 juga menyokong binaan Python lanjutan. Sebagai contoh, perkara di atas boleh dipendekkan kepada:

<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>

Anda juga boleh memanfaatkan penapis Jinja2. Jika kamus anda dalam format JSON, anda boleh menggunakan penapis tojson untuk menukarnya kepada objek JavaScript:

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

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat dan Gunakannya dengan Peta Google?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Python JavaScript flask json html Array Object if for format Filter this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mengubah Suai Format Tarikh Paksi X untuk Label Tick Ringkas dalam Matplotlib?Artikel seterusnya：Bagaimana untuk Mengubah Suai Format Tarikh Paksi X untuk Label Tick Ringkas dalam Matplotlib?

Artikel berkaitan

Lihat lagi