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

DDD
Libérer: 2024-10-31 10:41:29
original
595 Les gens l'ont consulté

How to Pass Data from Flask to JavaScript in a Template?

Transmission de données de Flask à JavaScript dans un modèle

Dans Flask, la fonction render_template() transmet des variables aux vues pour une utilisation en HTML. Cependant, comment pouvez-vous transmettre des données à JavaScript dans le même modèle ?

Considérez l'exemple suivant, dans lequel une application Flask appelle une API qui renvoie un dictionnaire. L'objectif est de transmettre les informations de longitude et de latitude à JavaScript pour les utiliser avec l'API Google Maps.

<code class="python">from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def get_data():
    events = api.call(get_event, arg0, arg1)
    geocode = event['latitude'], event['longitude']
    return render_template('get_data.html', geocode=geocode)</code>
Copier après la connexion

Solution

Flask vous permet d'utiliser la variable {{ }} syntaxe d'espace réservé n'importe où dans le modèle, y compris dans le code JavaScript.

Pour transmettre les données de géocodage à JavaScript, incluez-les simplement dans l'espace réservé {{ }} :

<code class="html"><script>
  var someJavaScriptVar = '{{ geocode[1] }}';
</script></code>
Copier après la connexion

Cela permettra insérez la valeur de geocode[1] (la longitude) dans la variable JavaScript someJavaScriptVar.

Pour transmettre les données sous forme de tableau, vous pouvez utiliser la fonction join() :

<code class="html"><script>
  var myGeocode = [{{ ', '.join(geocode) }}];
</script></code>
Copier après la connexion

Cela générera le JavaScript suivant :

<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>
Copier après la connexion

Vous pouvez également utiliser des constructions avancées telles que des boucles for et des instructions if dans l'espace réservé {{ }}. Consultez la documentation Jinja2 pour plus de détails.

De plus, vous pouvez utiliser le filtre tojson pour convertir des objets Python en chaînes JSON, qui peuvent être directement utilisées en JavaScript :

<code class="html"><script>
  var myGeocode = {{ geocode|tojson }};
</script></code>
Copier après la connexion

Cette approche fournit un moyen pratique de transmettre des structures de données complexes de Flask à JavaScript dans vos modèles.

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!