Comment transmettre des données de Flask à JavaScript dans les modèles pour l'API Google Maps ?

Transmission de données de Flask à JavaScript dans des modèles

Présentation

Votre application Flask nécessite la transmission d'informations d'un dictionnaire Python à JavaScript dans un modèle, en particulier pour l'API Google Maps.

Solution

Render_template dans Flask fournit un mécanisme pour transmettre des variables aux modèles pour le rendu HTML. Pour étendre cette fonctionnalité à JavaScript, vous pouvez exploiter le moteur de création de modèles Jinja. Voici comment :

1. Incorporer des variables n'importe où : Les variables Jinja peuvent être utilisées dans tout votre modèle, y compris la partie JavaScript.
2. Affectation directe : Attribuez des variables JavaScript directement à l'aide de {{ variable }}. Par exemple, vous pouvez attribuer la longitude à une variable JavaScript :

<code class="javascript"><script>
  var longitude = '{{ geocode[1] }}';
</script></code>

3. Générer des définitions de tableau : Si vous souhaitez transmettre un tableau à JavaScript, générez-le comme définition de tableau dans votre modèle :

<code class="html">  <script>
    var geocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
  </script></code>

4. Utiliser les constructions Jinja : Jinja propose des constructions plus avancées. Par exemple, vous pouvez raccourcir la définition du tableau à l'aide du filtre de jointure :

<code class="html"><script>
  var geocode = [{{ ', '.join(geocode) }}];
</script></code>

5. Considérez le filtre tojson : Pour des structures de données plus complexes, utilisez le filtre tojson pour convertir des dictionnaires et des listes en chaînes JSON pour la consommation JavaScript :

<code class="html">  <script>
    var geocode = {{ geocode | tojson }};
  </script></code>

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!