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

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

Lors de la récupération de données à partir d'une API dans une application Flask, il peut être nécessaire de transmettre ces informations en JavaScript dans le modèle correspondant. Cet article explique comment y parvenir en tirant parti de la puissance des modèles Jinja2.

Dans Flask, la fonction render_template nous permet de transmettre des variables aux modèles HTML. Cependant, pour rendre ces variables disponibles en JavaScript, une étape supplémentaire est requise.

Jinja2, le moteur de création de modèles utilisé par Flask, fournit une syntaxe qui permet l'intégration d'expressions Python dans des modèles. Cela signifie que nous pouvons utiliser {{ variable }} n'importe où dans le modèle, y compris dans les scripts JavaScript.

Par exemple, considérons la route Flask suivante qui récupère les coordonnées d'une API :

<code class="python">@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>

Dans le modèle correspondant, nous pouvons passer la variable géocode à JavaScript comme ceci :

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

Cela nous permet d'accéder à la valeur de géocode[1] comme someJavaScriptVar dans notre code JavaScript.

Alternativement, pour transmettre la variable de géocodage sous forme de tableau, nous pouvons générer la définition du tableau dans le modèle :

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

Jinja2 prend également en charge des constructions plus avancées, telles que des boucles et des instructions if, qui peuvent être utilisées pour simplifie la génération de structures de données complexes.

De plus, le filtre tojson peut être utilisé pour convertir le tuple de géocodage en chaîne JSON, le rendant plus adapté à une utilisation en JavaScript :

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

Grâce à ces techniques, les développeurs peuvent partager de manière transparente des données entre Flask et JavaScript, permettant ainsi des applications Web interactives et dynamiques.

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!