Una pagina che chiama l'API

Fa parte della sezione API JSON del percorso Django di Coddy. Lezione 12 di 19.

La tua API ha un chiamante all'interno del sito: JavaScript nella home page. La pagina si carica una volta, poi il suo script richiede dati all'API e riempie la pagina senza ricaricarla. Lo script, tasks/static/tasks/app.js, è già fornito; a te spetta realizzare la pagina di cui ha bisogno.

fetch("/api/tasks/") invia una richiesta GET dal browser del visitatore e response.json() legge la risposta. document.getElementById("task-list") trova l'elemento il cui id è task-list, quindi la pagina deve contenerne uno. Uno script viene eseguito non appena il browser legge il relativo tag, perciò il tag va dopo gli elementi che utilizza, alla fine del body. Caricalo come faresti con un foglio di stile:

{% load static %}
<link rel="stylesheet" href="{% static 'shop/style.css' %}">

I controlli non possono eseguire JavaScript, quindi verificano la pagina e il JSON; l'anteprima esegue lo script per davvero.

Sfida

Medio

Leggi tasks/static/tasks/app.js, poi in tasks/templates/tasks/home.html:

Aggiungi l’elenco che lo script riempie, con l’id che cerca.
Carica tasks/app.js tramite {% static %}, posizionandolo in modo che l’elenco esista quando viene eseguito.

Premi Run: le tre attività appaiono nella pagina iniziale.

Provalo tu

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