Wie übergebe ich Daten von Flask in einer Vorlage an JavaScript?

Übergabe von Daten von Flask an JavaScript in einer Vorlage

In Flask übergibt die Funktion render_template() Variablen an Ansichten zur Verwendung in HTML. Wie können Sie jedoch innerhalb derselben Vorlage Daten an JavaScript übergeben?

Betrachten Sie das folgende Beispiel, in dem eine Flask-App eine API aufruft, die ein Wörterbuch zurückgibt. Das Ziel besteht darin, Längen- und Breitengradinformationen zur Verwendung mit der Google Maps-API an JavaScript zu übergeben.

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

Lösung

Flask ermöglicht Ihnen die Verwendung der Variable {{ }} Platzhaltersyntax an einer beliebigen Stelle in der Vorlage, auch im JavaScript-Code.

Um die Geokodierungsdaten an JavaScript zu übergeben, fügen Sie sie einfach in das {{ }} Platzhalter:

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

Dadurch wird der Wert von Geocode[1] (der Längengrad) in die JavaScript-Variable someJavaScriptVar eingefügt.

Um die Daten als Array zu übergeben, können Sie verwenden die Funktion „join()“:

<code class="html"><script>
  var myGeocode = [{{ ', '.join(geocode) }}];
</script></code>

Dadurch wird das folgende JavaScript generiert:

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

Sie können auch Verwenden Sie erweiterte Konstrukte wie for-Schleifen und if-Anweisungen innerhalb des Platzhalters {{ }}. Weitere Informationen finden Sie in der Jinja2-Dokumentation.

Darüber hinaus können Sie den Tojson-Filter verwenden, um Python-Objekte in JSON-Strings zu konvertieren, die direkt in JavaScript verwendet werden können:

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

Dieser Ansatz bietet eine bequeme Möglichkeit, komplexe Datenstrukturen von Flask an JavaScript in Ihren Vorlagen zu übergeben.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Daten von Flask in einer Vorlage an JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!