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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

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

Transmission de données vers JavaScript

Exemple : transmission de données géospatiales

Alternative : Utiliser le filtre tojson