Une page qui appelle l’API

Fait partie de la section API JSON du Journey Django de Coddy. Leçon 12 sur 19.

Ton propre site peut aussi appeler l’API, depuis JavaScript sur la page d’accueil. La page se charge une fois, puis son script demande des données à l’API et remplit la page sans la recharger. La page d’accueil de départ ne génère plus elle-même la liste ; le script s’en chargera. Le script, tasks/static/tasks/app.js, est fourni ; ta partie consiste à créer la page dont il a besoin.

fetch("/api/tasks/") envoie une requête GET depuis le navigateur du visiteur, et response.json() lit la réponse. document.getElementById("task-list") trouve l’élément dont l’id est task-list, la page doit donc en contenir un. Un script s’exécute dès que le navigateur lit sa balise ; celle-ci doit donc se trouver après les éléments qu’il utilise, à la fin du corps. Charge-le avec {% static %} :

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

Les vérifications ne peuvent pas exécuter JavaScript ; elles testent donc la page et le JSON. L’aperçu exécute réellement le script.

Défi

Moyen

Lis tasks/static/tasks/app.js, puis ajoute dans tasks/templates/tasks/home.html la liste que le script remplit, avec l’identifiant qu’il recherche. Charge tasks/app.js à l’aide de {% static %}, en plaçant le script de sorte que la liste existe lorsqu’il s’exécute.

Appuie sur « Exécuter » : Buy milk, Write the report et Call the bank apparaissent sur la page d’accueil.

Essayez vous-même

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
</body>
</html>