Una pagina che chiama l'API

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

Anche il tuo sito può chiamare l’API, dal JavaScript della home page. La pagina viene caricata una volta, poi il suo script chiede i dati all’API e riempie la pagina senza ricaricarla. La home page iniziale non genera più l’elenco da sola: lo farà lo script. Lo script, tasks/static/tasks/app.js, è già fornito; a te spetta creare 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, quindi il tag va dopo gli elementi che usa, alla fine del body. Caricalo tramite {% static %}:

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

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

Sfida

Medio

Leggi tasks/static/tasks/app.js, poi aggiungi in tasks/templates/tasks/home.html l’elenco che lo script riempie, con l’id che cerca. Carica tasks/app.js tramite {% static %}, inserendolo in modo che l’elenco esista quando lo script viene eseguito.

Premi «Esegui»: Buy milk, Write the report e Call the bank 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>