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

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:

  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>


  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>

Ini menjana output HTML yang mengandungi tugasan pembolehubah JavaScript.

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

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

Jinja2 juga menyokong binaan Python lanjutan. Sebagai contoh, perkara di atas boleh dipendekkan kepada:

  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>


  <p>Hello World</p>
  <button onclick=""alert('Geocode:" mygeocode></button>

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!