Maison > Article > interface Web > Comment transmettre des données de Flask à JavaScript dans des modèles ?

Comment transmettre des données de Flask à JavaScript dans des modèles ?

Susan Sarandonoriginal: 2024-10-31 02:29:29600parcourir

How to Pass Data from Flask to JavaScript in Templates?

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

Lorsque vous travaillez avec Flask, il est souvent nécessaire de transmettre des données du backend au frontend pour les manipuler par JavaScript. Ceci peut être réalisé grâce à des modèles de rendu.

Transmission de données vers JavaScript

Le moteur de modèles Jinja2 utilisé par Flask nous permet d'accéder aux variables Python directement dans les modèles. Pour transmettre une variable de Python à JavaScript, entourez-la simplement de doubles accolades {{ }} :

<code class="html"><head>
  <script>
    var myVariable = '{{ my_python_variable }}';
  </script>
</head></code>

Exemple : transmission de données géospatiales

Considérez le scénario suivant où nous voulons transmettre un dictionnaire de géocoordonnées à l'API Google Maps dans un modèle :

<code class="python"># Assuming 'events' is a dictionary
geocode = event['latitude'], event['longitude']
return render_template('my_template.html', geocode=geocode)</code>

Pour rendre ces données disponibles en JavaScript, on peut utiliser Jinja2 :

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

Alternative : Utiliser le filtre tojson

Jinja2 propose un filtre tojson qui convertit un objet Python en chaîne JSON, qui peut être directement intégrée dans une variable 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!

Python JavaScript flask json String Object for Filter double using this Access

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：Félicitations au Wix Studio Challenge : gagnant de l'édition communautaire !Article suivant：Félicitations au Wix Studio Challenge : gagnant de l'édition communautaire !

Articles Liés

Voir plus