[PYTHON] Erstellen Sie eine einfache App, die die Fetch-API für Ajax-Anforderungen in Flask enthält, und erklären Sie sie schnell.
Einführung
・ Für diejenigen, die angefangen haben, Flask und JavaScript zu studieren
- Verwenden Sie TheCatAPI.com: Beta, um eine App zu erstellen, die Bilder von Katzen in Ajax-Anfragen abruft.
Erstellen Sie eine Flask-App, um Bilder von Katzen mit der Fetch-API zu erhalten
Kolben vorbereiten. Wenn Sie sich bei Flask immer noch nicht sicher sind, lesen Sie den folgenden Artikel. [Wahrscheinlich das zweitbeliebteste Webanwendungsframework in Python] Fassen Sie die Grundlagen von Flask auf leicht verständliche Weise zusammen
Die Konfiguration ist wie folgt.
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>
Wenn Sie Flask oben starten, wird der folgende Bildschirm im Browser angezeigt.
Die Version, die die API in JavaScript trifft
Lassen Sie uns nun das Bild der Katze mit der Fetch-API anzeigen. Klicken Sie auf die Schaltfläche, um das Bild der Katze anzuzeigen.
Der gesamte HTML-Code ist unten
.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">Sehen Sie die Katze</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>
Erläuterung
Mit der Abruf-API können Sie das Anforderungsziel ** URL ** und die zweiten ** Optionen ** als erstes Argument festlegen. Definieren Sie diesmal die URL und die Optionen wie folgt.
.js
const url = 'https://api.thecatapi.com/v1/images/search?size=full';
const options = {method: 'GET'};
Geben Sie in den Optionen GET als Anforderungsmethode an. Wenn Sie mehr über Optionen erfahren möchten, lesen Sie bitte die folgenden Informationen. https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch
Da der Rückgabewert von fetch von [Versprechen] zurückgegeben wird (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise), können Sie die Methode **. Then () ** verwenden. Ich werde. Und da die Rückruffunktion in ** verwendet werden kann. Dann () **, weglassen (), weil es ein ** Argument in der ** Pfeilfunktion ** gibt, und weglassen {}, weil es die einzige Anweisung ist, die zurückgibt. **.
.js
fetch(url, options)
.then( response => response.json() );
Wenn Sie es mit der Pfeilfunktion schreiben, die nicht ausgelassen wird, sieht es wie folgt aus.
.js
fetch(url, options)
.then( (response) => {
return response.json()
});
Bei Verwendung von fetch kann der danach geschriebene Code ausgeführt werden, bevor die Anforderung gesendet und die Antwort zurückgegeben wird. Daher verwende ich ** asyn / await **, um den Abruf auszuführen und den nachfolgenden Code auszuführen, nachdem die Antwort zurückgegeben wurde.
Definieren Sie eine ** asynchrone Funktion ** und fügen Sie ** wait ** zu der Funktion hinzu, die fetch verwendet, und fügen Sie sie in eine Variable ein. Es ist der folgende Teil
.js
async function getImage(url, options){
const response = await getCatImage(url, options);
Danach wird die Bild-URL der Katze als appendChild angezeigt.
Da die Reihe von Prozessen nach dem Klicken auf die Schaltfläche ausgeführt wird, wird sie ausgeführt, wenn mit ** addEventListener ** ** geklickt ** wird.
.js
document.getElementById("lookCatButton")
.addEventListener("click", () =>{
getImage(url, options)
})
Jedes Mal, wenn Sie die Taste drücken, wird das Bild der Katze angezeigt.
Wagen Sie es, die API auf der Python-Seite zu treffen
Wie oben erwähnt, erfordert Fetch, dass die URL die Anforderung an das erste Argument sendet. Erstellen Sie daher ** die Anforderungsziel-URL mit Flask-Routing **. Daher muss der Code zum Abrufen der Daten der Neko-chan-API und ** return ** mit jsonify bei der Rückgabe als Antwort mit json ausgegeben werden.
Ich habe den folgenden Code gemacht. ** / get_data ** wird hinzugefügt.
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' #Neko-Chan API
response = requests.get(url)
cat_img_url = eval(response.text)[0]['url'] #Hier können Sie die Bild-URL abrufen
response_data = {
'cat_img_url' : cat_img_url
}
return jsonify(response_data) #Kehren Sie mit jsonify zu js Seite zurück
@app.route('/')
def hello_world():
return render_template('hello.html')
if __name__ == "__main__":
app.run(debug=True)
Ändern Sie auf der JavaScript-Seite die URL des Anforderungsziels in **. / Get_data ** des zuvor festgelegten Routing-Ziels.
.js
const url = './get_data';
Da der in json ausgegebene Wert von Python eingegeben wird, erhalten Sie den auf der Python-Seite festgelegten "cat_img_url".
.js
imageElement.src = response.cat_img_url;
Alles andere ist das gleiche und der Gesamtcode lautet wie folgt.
.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">Sehen Sie die Katze</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>
Wenn Sie jetzt auf die Schaltfläche klicken, können Sie das Bild abrufen und auf der Python-Seite anzeigen.
Übrigens, wenn Sie dieses Mal direkt auf das hinzugefügte Routing-Ziel zugreifen, werden die folgenden Inhalte angezeigt.
abschließend
Dieses Mal habe ich versucht, eine Anfrage und eine Antwort mit zwei Mustern abzurufen, von denen eines auf der Python-Seite und das andere auf der JavaScript-Seite angefordert wurde, was sehr gut für die Organisation meiner Gedanken war.
Verweise
Hinweise zur neuesten Ajax-Anforderungskommunikation und Fetch-API [Wahrscheinlich das zweitbeliebteste Webanwendungsframework in Python] Fassen Sie die Grundlagen von Flask auf leicht verständliche Weise zusammen MDN web docs - Fetch API MDN-Webdokumente - Verwenden von Fetch MDN-Webdokumente - Rückruffunktion MDN-Webdokumente - Pfeilfunktionen MDN web docs - async function
Recommended Posts