suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie übergebe ich Daten in Vorlagen von Flask an JavaScript?

Wie übergebe ich Daten in Vorlagen von Flask an JavaScript?

Susan Sarandon
Susan SarandonOriginal
2024-10-31 02:29:29661Durchsuche

How to Pass Data from Flask to JavaScript in Templates?

Übergabe von Daten von Flask an JavaScript in Vorlagen

Bei der Arbeit mit Flask ist es oft notwendig, Daten vom Backend an das Frontend zur Bearbeitung durch JavaScript zu übergeben. Dies kann durch das Rendern von Vorlagen erreicht werden.

Übergabe von Daten an JavaScript

Die von Flask verwendete Jinja2-Vorlagen-Engine ermöglicht uns den direkten Zugriff auf Python-Variablen innerhalb von Vorlagen. Um eine Variable von Python an JavaScript zu übergeben, schließen Sie sie einfach in doppelte geschweifte Klammern {{ }} ein:

<code class="html"><head>
  <script>
    var myVariable = '{{ my_python_variable }}';
  </script>
</head></code>

Beispiel: Übergabe von Geodaten

Betrachten Sie das folgende Szenario, an das wir übergeben möchten ein Wörterbuch mit Geokoordinaten für die Google Maps API in einer Vorlage:

<code class="python"># Assuming 'events' is a dictionary
geocode = event['latitude'], event['longitude']
return render_template('my_template.html', geocode=geocode)</code>

Um diese Daten in JavaScript verfügbar zu machen, können wir Jinja2 verwenden:

<code class="html"><head>
  <script>
    var lat = '{{ geocode[0] }}';
    var lng = '{{ geocode[1] }}';
  </script>
</head></code>

Alternative: Verwendung des tojson-Filters

Jinja2 bietet einen Tojson-Filter, der ein Python-Objekt in einen JSON-String umwandelt, der direkt in eine JavaScript-Variable eingebettet werden kann:

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

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

Python JavaScript flask json String Object for Filter double using this Access
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Herzlichen Glückwunsch zum Gewinner der Wix Studio Challenge: Community Edition!Nächster Artikel：Herzlichen Glückwunsch zum Gewinner der Wix Studio Challenge: Community Edition!

In Verbindung stehende Artikel

Mehr sehen