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

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

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

Article précédent：Comment modifier le format de date de l'axe X pour les étiquettes de graduation concises dans Matplotlib ?Article suivant：Comment modifier le format de date de l'axe X pour les étiquettes de graduation concises dans Matplotlib ?

Articles Liés

Voir plus