Heim > Artikel > Backend-Entwicklung > Wie übergebe ich Daten von Flask in einer Vorlage an JavaScript und verwende sie mit Google Maps?

Wie übergebe ich Daten von Flask in einer Vorlage an JavaScript und verwende sie mit Google Maps?

Linda HamiltonOriginal: 2024-10-30 13:57:27968Durchsuche

How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

Übergabe von Daten aus Flask an JavaScript in einer Vorlage

Problem: Sie möchten ein Wörterbuch verwenden, das von einem API-Aufruf in Ihrem JavaScript-Code abgerufen wurde innerhalb einer Flask-Vorlage, insbesondere um lange/latte Tupel an die Google Maps-API zu übergeben.

Lösung:

Um Variablen von Flask an JavaScript in einer Vorlage zu übergeben, müssen Sie kann die {{ Variable }}-Syntax überall darin verwenden. Beispielsweise in Ihrer get_data.html-Vorlage:

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>
</body>
</html>

Dadurch wird die HTML-Ausgabe generiert, die die JavaScript-Variablenzuweisung enthält.

Um eine Liste an JavaScript zu übergeben, müssen Sie eine Liste erstellen eine Array-Definition in Ihrer Ausgabe:

<html>
  <head>
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])">Click me</button>
  </body>
</html>

Jinja2 unterstützt auch erweiterte Python-Konstrukte. Das Obige kann beispielsweise wie folgt abgekürzt werden:

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick=&quot;alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])&quot; />
</body>
</html>

Sie können auch Jinja2-Filter nutzen. Wenn Ihr Wörterbuch im JSON-Format vorliegt, können Sie es mit dem Tojson-Filter in ein JavaScript-Objekt konvertieren:

<script>
  var myGeocode = {{ geocode|tojson }};
</script>

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

Python JavaScript flask json html Array Object if for format Filter this

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：Wie ändere ich das X-Achsen-Datumsformat für prägnante Tick-Beschriftungen in Matplotlib?Nächster Artikel：Wie ändere ich das X-Achsen-Datumsformat für prägnante Tick-Beschriftungen in Matplotlib?

In Verbindung stehende Artikel

Mehr sehen