Comment transmettre des données de Flask à JavaScript dans des modèles ?-js tutoriel-php.cn

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

Susan Sarandon

Libérer： 2024-10-31 02:29:29

original

676 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!