Wie übergebe ich Daten in Vorlagen von Flask an JavaScript?-js-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-10-31 02:29:29

Original

600 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!