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

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>

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>

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>

Cela générera le JavaScript suivant :

<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>

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>

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!