Wie übergebe ich Daten von Flask in einer Vorlage an JavaScript und verwende sie mit 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:

  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>


  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>

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:

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

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

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


  <p>Hello World</p>
  <button onclick=""alert('Geocode:" mygeocode></button>

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!