[JAVA] Créez une application simple qui intègre l'API Fetch pour les requêtes Ajax dans Flask et expliquez-la rapidement.

introduction

・ Pour ceux qui ont commencé à étudier Flask et JavaScript -Utilisez TheCatAPI.com: Beta pour créer une application qui récupère des images de chats dans les requêtes Ajax.

Créez une application Flask pour obtenir des images de chats avec l'API Fetch

Préparez le flacon. Si vous n'êtes toujours pas sûr de Flask, consultez l'article ci-dessous. [Probablement le deuxième framework d'application Web le plus populaire en Python] Résumez les bases de Flask de manière facile à comprendre

La configuration est la suivante.

app.py
templates
└─hello.html

app.py


from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('hello.html')

if __name__ == "__main__":
    app.run(debug=True)

hello.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
    <h1>hello</h1>
</head>
<body>
    
</body>
</html>

Lorsque vous démarrez Flask ci-dessus, l'écran suivant apparaît dans le navigateur. image.png

La version qui atteint l'API en JavaScript

Maintenant, affichons l'image du chat avec l'API Fetch. Cliquez sur le bouton pour afficher l'image du chat.

Le code HTML complet est ci-dessous

.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
    <style>
        .w300 {
            width: 300px;
        }
    </style>
</head>
<body>
    <form id="form">
        <div id="image"></div>
        <button id="lookCatButton" type="button">Voir le chat</button>
    </form>
    <script>
        const url = 'https://api.thecatapi.com/v1/images/search?size=full';
        const options = {
            method: 'GET'
        }

        function getCatImage(url, options){
            return fetch(url, options)
            .then( response => response.json() );
        }
        async function getImage(url, options){
            const response = await getCatImage(url, options);
            const imageDiv = document.getElementById("image");
            const imageElement = document.createElement("img");
            imageElement.src = response[0].url;
            imageElement.className = "w300";
            imageDiv.appendChild(imageElement);
        }
        document.getElementById("lookCatButton")
        .addEventListener("click", () =>{
            getImage(url, options)
        })
    </script>
</body>
</html>

La description

L'API Fetch vous permet de définir la destination de la requête ** URL ** et les secondes ** options ** comme premier argument. Cette fois, définissez l'URL et les options comme suit.

.js


const url = 'https://api.thecatapi.com/v1/images/search?size=full';
const options = {method: 'GET'};

Dans les options, spécifiez GET comme méthode de demande. Si vous souhaitez en savoir plus sur les options, veuillez vous reporter à ce qui suit. https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Puisque la valeur de retour de fetch est retournée par promise, vous pouvez utiliser la méthode **. Then () **. Je vais. Et comme la fonction de rappel peut être utilisée dans **. Then () **, omit () car il y a un ** argument dans ** arrow function **, et omit {} car c'est la seule instruction renvoyée. **.

.js


fetch(url, options)
.then( response => response.json() );

Si vous l'écrivez avec la fonction flèche qui n'est pas omise, ce sera comme suit.

.js


fetch(url, options)
.then( (response) => {
    return response.json()
});

Lorsque vous utilisez fetch, le code écrit après peut être exécuté avant que la demande ne soit envoyée et que la réponse soit renvoyée. Par conséquent, ** asyn / await ** est utilisé pour exécuter l'extraction et exécuter le code suivant une fois la réponse renvoyée.

Définissez une ** fonction asynchrone ** et ajoutez ** await ** à la fonction qui utilise fetch et placez-la dans une variable. C'est la partie suivante

.js


async function getImage(url, options){
    const response = await getCatImage(url, options);

Après cela, l'URL de l'image du chat s'affiche sous la forme appendChild.

Puisque la série de processus est exécutée après avoir cliqué sur le bouton, elle est exécutée lorsque ** click ** est fait avec ** addEventListener **.

.js


document.getElementById("lookCatButton")
.addEventListener("click", () =>{
    getImage(url, options)
})

Désormais, chaque fois que vous appuyez sur le bouton, l'image du chat sera affichée. image.png

Osez frapper l'API côté python

Comme mentionné ci-dessus, fetch nécessite que l'URL envoie la requête au premier argument, donc ** créez l'URL de destination de la requête avec le routage Flask **. Par conséquent, le code pour obtenir les données de l'API Neko-chan et ** return ** avec jsonify pour vider avec json lors du retour en tant que réponse.

J'ai fait le code suivant. ** / get_data ** est ajouté.

from flask import Flask, render_template, jsonify
import requests
app = Flask(__name__)


@app.route('/get_data')
def get_data():
    url = 'https://api.thecatapi.com/v1/images/search?size=full' #API Neko-chan
    response = requests.get(url)
    cat_img_url = eval(response.text)[0]['url'] #Obtenez l'URL de l'image ici
    response_data = {
        'cat_img_url' : cat_img_url
    }
    return jsonify(response_data) #Revenir côté js avec jsonify


@app.route('/')
def hello_world():
    return render_template('hello.html')

if __name__ == "__main__":
    app.run(debug=True)

Du côté JavaScript, remplacez l'URL de la destination de la requête par **. / Get_data ** de la destination de routage que vous avez définie précédemment.

.js


const url = './get_data';

Puisque la valeur sauvegardée dans json est entrée à partir de python, obtenez le "cat_img_url" défini du côté python.

.js


imageElement.src = response.cat_img_url;

Tout le reste est le même et le code global est le suivant.

.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w300 {
            width: 300px;
        }
    </style>
</head>
<body>
    <form id="form">
        <div id="image"></div>
        <button id="lookCat" type="button">Voir le chat</button>
    </form>
    <script>
        const url = './get_data';
        const options = {
            method: 'GET'
        }

        function getCatImage(url, options){
            return fetch(url, options)
            .then( response => response.json() );
        }
        async function getImage(url, options){
            const response = await getCatImage(url, options);
            const imageDiv = document.getElementById("image");
            const imageElement = document.createElement("img");
            imageElement.src = response.cat_img_url;
            imageElement.className = "w300";
            imageDiv.appendChild(imageElement);
        }
        document.getElementById("lookCat")
        .addEventListener("click", () =>{
            getImage(url, options)
        })
    </script>
</body>
</html>

Désormais, lorsque vous cliquez sur le bouton, vous pouvez obtenir l'image et l'afficher côté python.

image.png

D'ailleurs, si vous accédez directement à la destination de routage ajoutée cette fois, le contenu suivant sera affiché. image.png

en conclusion

Cette fois, j'ai essayé de récupérer la requête et la réponse avec deux modèles, l'un demandant du côté python et l'autre demandant du côté JavaScript, ce qui était très bon pour organiser mon esprit.

Les références

Notes sur la dernière communication de requête Ajax et Fetch API [Probablement le deuxième framework d'application Web le plus populaire en Python] Résumez les bases de Flask de manière facile à comprendre MDN web docs - Fetch API Documents Web MDN - Utilisation de Fetch Documents Web MDN - Fonction de rappel Documents Web MDN - Fonctions de flèche MDN web docs - async function

Recommended Posts

Créez une application simple qui intègre l'API Fetch pour les requêtes Ajax dans Flask et expliquez-la rapidement.
Un simple serveur simulé qui incorpore simplement l'en-tête de la requête HTTP dans le corps de la réponse et le renvoie.
Créer une application GUI simple en Python
Créez une application Web simple avec Flask
Créez une API REST à l'aide du modèle appris dans Lobe et TensorFlow Serving.
Créez une application Web qui convertit le PDF en texte à l'aide de Flask et PyPDF2
Créez un filtre pour obtenir un jeton d'accès avec l'API Graph (Flask)
Si vous définissez une méthode dans une classe Ruby, puis définissez une méthode dans celle-ci, elle devient une méthode de la classe d'origine.
Le résultat de la création d'un album de cartes de jeunes mariés italiens en Python et de son partage
Créez une API simple juste pour entrer et sortir des fichiers JSON ~ Édition Python / Flask ~
Un moyen simple de mettre en cache la valeur dans le décorateur de propriété. En lecture seule. Notez qu'il conserve la mise en cache jusqu'à ce que l'objet soit supprimé.
Un serveur qui renvoie le nombre de personnes devant la caméra avec bottle.py et OpenCV
Analysez l'API Researchmap avec Python et créez automatiquement un fichier Word pour la liste des succès
Étapes pour configurer Pipenv, créer une application CRUD avec Flask et la conteneuriser avec Docker
Obtenez le prix d'achat et de vente de la monnaie virtuelle avec l'API de l'échange Zaif et créez un graphique
Un programme qui reçoit la commande d'asservissement du contrôleur radio, interrompt la tarte aux râpes et l'enregistre.
[Python] Le rôle de l'astérisque devant la variable. Divisez la valeur d'entrée et affectez-la à une variable
Une raison simple pour laquelle la valeur de retour de round (2.675,2) est de 2,67 en python (elle devrait être de 2,68 en réalité ...)
J'ai créé un bot LINE qui me dit le type et la force de Pokémon dans la région de Garal avec Heroku + Flask + PostgreSQL (Heroku Postgres)
pandas Récupère le nom d'une colonne contenant un caractère spécifique
[Python / Django] Créer une API Web qui répond au format JSON
Une fonction qui mesure le temps de traitement d'une méthode en python
Creusez le répertoire et créez une liste de chemins de répertoire + noms de fichiers
Créez une fonction pour obtenir le contenu de la base de données dans Go
Notez que je comprends l'algorithme du classificateur Naive Bayes. Et je l'ai écrit en Python.
[Rails 6] Intégrez Google Map dans l'application et ajoutez un marqueur à l'adresse saisie. [Confirmation des détails]
[Python / Jupyter] Traduisez le commentaire du programme copié dans le presse-papiers et insérez-le dans une nouvelle cellule.
J'ai créé un script POST pour créer un problème sur Github et l'enregistrer dans le projet
Créez un bot qui publie sur Slack le nombre de personnes positives pour le nouveau virus corona à Tokyo
[CleanArchitecture avec Python] Appliquez CleanArchitecture à une API simple étape par étape, et essayez de comprendre "quel type de changement est fort" dans la base de code.