Comment faire communiquer Python et JavaScript en utilisant JSON

Comment faire communiquer Python et JavaScript en utilisant JSON

Voulez-vous savoir comment envoyer des données de JavaScript vers Python ? Eh bien, c’est facile avec une interface de programmation d’application (API).

Les langages de programmation utilisent des API pour communiquer et échanger des données. Typiquement, dans ce type de communication, la technologie backend (fournisseur d’API), après avoir reçu la requête du script frontend, répond avec des données. Cependant, il existe de nombreux types de requêtes ; dans cet article, vous apprendrez à utiliser une requête POST pour envoyer des données au format JSON de JavaScript à un serveur via l’API Python.

Installation du serveur Python et Flask

Si vous êtes sous Windows et que Python n’est pas installé, téléchargez-le depuis le site Web python.org. Les utilisateurs de Mac n’ont pas besoin de télécharger Python, car le système d’exploitation l’accompagne par défaut. Vous pouvez également bien suivre Linux.

Paramétrage et installation du serveur

Vous avez besoin d’un serveur pour créer une API REST Python. Il existe de nombreux frameworks Web Python pour cela. Flask, Django, FastAPI, Tornado et de nombreux autres outils sont utiles lors de l’écriture d’API REST en Python.

Néanmoins, vous utiliserez Flask pour ce didacticiel car il est facile à comprendre et compatible avec l’API.

Tout d’abord, créez un environnement virtuel Python. Ouvrez votre terminal dans le dossier racine de votre projet.Ensuite, installez ballon et ballon-cors Utilisez pip :

pip install Flacon, flacon-cors

Ce ballon-cors Le package est le module CORS intégré de Flask pour contourner les politiques de ressources d’origine croisée lors de la demande à partir des points de terminaison de l’API. Au fur et à mesure que vous continuez, vous verrez comment vous installer avec Flask.

Faire une vidéo du jour

C’est tout pour la section d’installation.

Structure du squelette du flacon

Ensuite, créez un nouveau fichier dans le dossier racine du projet.assurez-vous qu’il a .py extension de fichier.Par exemple, il peut être application.py.

Ouvrez le fichier dans votre éditeur de code préféré et configurez votre application Flask comme suit :

importer un flacon à partir d’un flacon, requêtes, jsonify
Importer CORS depuis flask_cors
# mettre en place le ballon:
app = flacon (__nom__)
#Set Flask pour contourner CORS sur le frontend :
cors = CORS(application)
# lancer l’application:
Si __nom__ == « __main__ »:
exécution de l’application()

Le code ci-dessus importe les modules requis et configure votre application. code supplémentaire à la fin (exécution de l’application()) pour que l’application s’exécute sur le port par défaut, généralement le port 5000.

Créer un point de terminaison API POST

Dans ce didacticiel, vous utiliserez un point de terminaison Flask pour envoyer des données JSON contenant différentes marques de voitures et leurs modèles à partir de JavaScript vers un serveur.Dans votre JavaScript, vous affectez les données à un autoCependant, vous pouvez lui donner le nom de votre choix.

Mais d’abord, ouvrez application.py fichier, configurez un point de terminaison API POST, puis appelez-le destinataireN’oubliez pas que vous pouvez utiliser n’importe quelle convention de nommage.

Voici à quoi ressemble votre fichier Python :

importer un flacon à partir d’un flacon, requêtes, jsonify
Importer CORS depuis flask_cors
# mettre en place le ballon:
app = flacon (__nom__)
#Set Flask pour contourner CORS:
cors = CORS(application)
#Créer le point de terminaison POST de l’API du récepteur:
@app.route(« /receiver », methodes=[« POST »])
def postME() :
données = request.get_json()
données = jsonify(données)
renvoyer des données
Si __nom__ == « __main__ »:
application en cours d’exécution (debug=true)

Publier des données de JavaScript vers l’API Python Flask

Maintenant que le point de terminaison de l’API POST est prêt, créez un fichier JavaScript et HTML dans le dossier racine de votre projet (où réside votre application flask). donnez-leur le nom que vous voulez (données.js et index.html Dans ces circonstances).

Mais d’abord, voici comment index.html On dirait:

<头部>
<标题>
Envoi Python


<正文>
Publier en Python

Il convient de noter que le fichier HTML ci-dessus décrit un bouton qui écoute les événements de clic pour afficher les données publiées dans la console ou le DOM.

Ce h3 Si vous décidez ultérieurement de l’afficher dans le DOM, le balisage servira de conteneur pour les données entrantes. Notez qu’il ne s’agit pas d’une convention – vous pouvez afficher les données entrantes dans n’importe quel conteneur HTML de votre choix.

En relation : Comment tester les API avec Python et JavaScript

Après avoir configuré le fichier HTML, utilisez l’API Fetch intégrée de JavaScript pour publier les données (auto) au serveur.

Voici JavaScript :

// Récupère les éléments de bouton et de conteneur à partir de HTML:
bouton constant = document.getElementById(« theButton »)
données constantes = document.getElementById(« info »)
// Crée un tableau de voitures à envoyer au serveur:
voiture constante = [
{ « make »: »Porsche », « model »: »911S » },
{ « make »: »Mercedes-Benz », « model »: »220SE » },
{ « make »: »Jaguar », »model »: « Mark VII » }
];
// crée un écouteur d’événement sur l’élément bouton:
bouton.onclick = fonction(){
// Utilisez fetch pour obtenir le point de terminaison du récepteur à partir de Python:
récupérer(« http://127.0.0.1:5000/récepteur »,
{
méthode : ‘POST’,
Titre:{
‘type de contenu’ : ‘application/json’,
« accepter »: « application/json »
},
// structure la charge utile en JSON:
Corps : JSON.stringify(voitures)}).then(res=>{
si (résoudre) {
retourner res.json()
} autre {
alert(« Il y a un problème »)
}
}).then(jsonResponse=>{

// Enregistre les données de réponse dans la console
console.log(jsonResponse)
}
).catch((err) => console.error(err));

}

Le script ci-dessus contient un tableau JSON de voitures de rallye.Ce bouton.Cliquez sur Les fonctions sont des écouteurs d’événements de clic attachés aux boutons dans le fichier HTML que vous avez créé précédemment.

Ainsi, lorsque l’utilisateur clique sur le bouton, amène le utiliser postal Requête pour envoyer un tableau de voitures au serveur.Ce destinataire Un point de terminaison dans Flask reçoit cette demande et envoie les données de réponse à JavaScript (frontend), qui s’affiche dans la console du navigateur.

Maintenant, lancez le fichier HTML dans votre navigateur et ouvrez la console développeur (sous Windows : Ctrl + transfert + Une générationSur Mac : Commande + ALT + Une génération).aller à la console partie, Vous verrez la réponse JSON renvoyée.

En relation : Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web

Pour suivre les réponses JSON en temps réel, cliquez sur L’Internet dans la console développeur (sur Chrome).Sous la chronologie du réseau, sélectionnez destinataire ou le nom de votre point de terminaison Flask.puis clique Répondre en haut de ce sous-menu.

La réponse devrait ressembler à ceci :

Capture d’écran : Aucune attribution requise

Alternativement, vous pouvez cliquer sur Entête Afficher l’état de la réponse de la demande. Cela devrait être 200, ce qui signifie que votre API a renvoyé une réponse valide.

Ensuite, vous pouvez désormais écrire des données dans le DOM avec une logique supplémentaire en JavaScript :

// Récupère le bouton et le conteneur depuis HTML:
bouton constant = document.getElementById(« theButton »)
données constantes = document.getElementById(« info »)
// crée un écouteur d’événement sur l’élément bouton:
bouton.onclick = fonction(){

// Utilisez fetch pour obtenir le point de terminaison récepteur à partir de Python :
récupérer(« http://127.0.0.1:5000/récepteur »,
{
méthode : ‘POST’,
Titre:{
‘type de contenu’ : ‘application/json’,
« accepter »: « application/json »
},
// structure la charge utile en JSON:
Corps : JSON.stringify(voitures)}).then(res=>{
si (résoudre) {
retourner res.json()
} autre {
alert(« Il y a un problème »)
}
}).then(jsonResponse=>{

// Utilisez la carte pour itérer sur les données et écrire votre logique de rendu:
jsonResponse.map(main =>
Main.make=== »Porsche » ? data.innerHTML += »

« + Main.make+ » « + » est un bon produit »:
data.innerHTML += »

« + Main.make+ » « + » est un produit normal »)
}
).catch((err) => console.error(err)); }

utiliser carte fonction, le script ci-dessus parcourt les données de réponse.Ce production principale La propriété obtient le nom de chaque voiture à partir des données de réponse renvoyées par le serveur.logique ternaire à l’intérieur carte La fonction indique ensuite à JavaScript ce qu’il faut afficher sur chaque marque.

Ainsi, lorsque vous cliquez sur le bouton publier, vous obtenez ceci :

Capture d’écran : Aucune attribution requise

pour toi! Vous savez maintenant configurer un point de terminaison Flask et utiliser JavaScript pour envoyer des données de manière asynchrone au serveur.

Continuer à explorer les API REST dans le développement Web

Les API offrent le meilleur moyen de séparer le backend du frontend. L’un de ses avantages est qu’il permet de découpler facilement le côté client du côté serveur. Vous avez vu comment connecter JavaScript à Python et envoyer des données à un serveur, mais cela ne fait qu’effleurer la surface.

Vous pouvez creuser plus profondément en connectant l’API Flask REST à une base de données comme MongoDB – afin que vous puissiez avoir un référentiel pour stocker les données publiées. Vous pouvez même en faire un projet à part entière en utilisant des champs de formulaire pour envoyer des données à une base de données.

A propos de l’auteur