Maison  >  Article  >  développement back-end  >  Comment transmettre des données de Flask à JavaScript dans un modèle et les utiliser avec Google Maps ?

Comment transmettre des données de Flask à JavaScript dans un modèle et les utiliser avec Google Maps ?

Linda Hamilton
Linda Hamiltonoriginal
2024-10-30 13:57:27973parcourir

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

Transmission de données de Flask vers JavaScript dans un modèle

Problème : Vous souhaitez utiliser un dictionnaire récupéré à partir d'un appel d'API dans votre code JavaScript au sein d'un modèle Flask, notamment pour transmettre des tuples long/lat à l'API Google Maps.

Solution :

Pour transmettre des variables de Flask à JavaScript dans un modèle, vous peut utiliser la syntaxe {{ variable }} n'importe où à l'intérieur. Par exemple, dans votre modèle 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>

Cela génère la sortie HTML qui contient l'affectation de variable JavaScript.

Pour transmettre une liste à JavaScript, vous devrez créer une définition de tableau dans votre sortie :

<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 prend également en charge les constructions Python avancées. Par exemple, ce qui précède peut être raccourci en :

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

Vous pouvez également exploiter les filtres Jinja2. Si votre dictionnaire est au format JSON, vous pouvez utiliser le filtre tojson pour le convertir en objet JavaScript :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn