Bagaimana untuk Menghantar Data dari Flask ke JavaScript dalam Templat dan Gunakannya dengan Peta Google?-Tutorial Python-php.cn

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

Linda Hamilton

Lepaskan： 2024-10-30 13:57:27

asal

985 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!