développement back-end
Tutoriel Python
Comment transmettre des données de Flask à JavaScript dans un modèle et les utiliser avec Google Maps ?
Comment transmettre des données de Flask à JavaScript dans un modèle et les utiliser avec Google Maps ?
Transmission de données de Flask vers JavaScript dans un modèle
Problème : Vous souhaitez utiliser un dictionnaire récupéré à partir d'un appel d'API dans votre code JavaScript au sein d'un modèle Flask, notamment pour transmettre des tuples long/lat à l'API Google Maps.
Solution :
Pour transmettre des variables de Flask à JavaScript dans un modèle, vous peut utiliser la syntaxe {{ variable }} n'importe où à l'intérieur. Par exemple, dans votre modèle get_data.html :
<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>Cela génère la sortie HTML qui contient l'affectation de variable JavaScript.
Pour transmettre une liste à JavaScript, vous devrez créer une définition de tableau dans votre sortie :
<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 prend également en charge les constructions Python avancées. Par exemple, ce qui précède peut être raccourci en :
<html>
<head>
<script>
var myGeocode = [{{ ', '.join(geocode) }}];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>Vous pouvez également exploiter les filtres Jinja2. Si votre dictionnaire est au format JSON, vous pouvez utiliser le filtre tojson pour le convertir en objet JavaScript :
<script>
var myGeocode = {{ geocode|tojson }};
</script>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment éviter d'être détecté par le navigateur lors de l'utilisation de Fiddler partout pour la lecture de l'homme au milieu?
Apr 02, 2025 am 07:15 AM
Comment éviter d'être détecté lors de l'utilisation de FiddlereVerywhere pour les lectures d'homme dans le milieu lorsque vous utilisez FiddlereVerywhere ...
Comment gérer les paramètres de requête de liste séparés par les virgules dans FastAPI?
Apr 02, 2025 am 06:51 AM
Fastapi ...
Comment résoudre les problèmes d'autorisation lors de l'utilisation de la commande python --version dans le terminal Linux?
Apr 02, 2025 am 06:36 AM
Utilisation de Python dans Linux Terminal ...
Comment enseigner les bases de la programmation novice en informatique dans le projet et les méthodes axées sur les problèmes dans les 10 heures?
Apr 02, 2025 am 07:18 AM
Comment enseigner les bases de la programmation novice en informatique dans les 10 heures? Si vous n'avez que 10 heures pour enseigner à l'informatique novice des connaissances en programmation, que choisissez-vous d'enseigner ...
La connexion Python Asyncio Telnet est immédiatement déconnectée: comment résoudre le problème de blocage côté serveur?
Apr 02, 2025 am 06:30 AM
À propos de Pythonasyncio ...
Comment obtenir des données d'information en contournant le mécanisme anti-frawler d'Investing.com?
Apr 02, 2025 am 07:03 AM
Comprendre la stratégie anti-rampe d'investissement.com, Beaucoup de gens essaient souvent de ramper les données d'actualités sur Investing.com (https://cn.investing.com/news/latest-news) ...
Python 3.6 Chargement du fichier de cornichon MODULENOTFOUNDERROR: Que dois-je faire si je charge le fichier de cornichon '__builtin__'?
Apr 02, 2025 am 06:27 AM
Chargement du fichier de cornichon dans Python 3.6 Erreur d'environnement: modulenotFounonError: NomoduLenamed ...
Quelle est la raison pour laquelle les fichiers de pipeline ne peuvent pas être écrits lors de l'utilisation du robot Scapy?
Apr 02, 2025 am 06:45 AM
Discussion sur les raisons pour lesquelles les fichiers de pipelines ne peuvent pas être écrits lors de l'utilisation de robots scapisnels lors de l'apprentissage et de l'utilisation de Crawlers scapides pour un stockage de données persistant, vous pouvez rencontrer des fichiers de pipeline ...
