Wie übergebe ich Daten von Flask in einer Vorlage an JavaScript und verwende sie mit Google Maps?-Python-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-10-30 13:57:27

Original

985 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!