Eine Seite, die die API aufruft

Teil des Abschnitts JSON-APIs der Django-Journey von Coddy. Lektion 12 von 19.

Deine API hat einen Aufrufer innerhalb der Website: JavaScript auf der Startseite. Die Seite wird einmal geladen, dann fragt ihr Skript die API nach Daten und füllt die Seite ohne erneutes Laden aus. Das Skript tasks/static/tasks/app.js ist vorgegeben; deine Aufgabe ist die Seite, die es benötigt.

fetch("/api/tasks/") sendet eine GET-Anfrage vom Browser des Besuchers, und response.json() liest die Antwort aus. document.getElementById("task-list") findet das Element, dessen id task-list ist, also muss die Seite ein solches Element enthalten. Ein Skript wird ausgeführt, sobald der Browser sein Tag liest. Deshalb gehört das Tag nach die Elemente, die es verwendet, ans Ende des Bodys. Binde es so ein wie ein Stylesheet:

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

Die Prüfungen können kein JavaScript ausführen, deshalb testen sie die Seite und das JSON; in der Vorschau wird das Skript tatsächlich ausgeführt.

Aufgabe

Mittel

Lies tasks/static/tasks/app.js und füge dann in tasks/templates/tasks/home.html Folgendes hinzu:

Füge die Liste hinzu, die das Skript füllt, und verwende dafür die ID, nach der es sucht.
Binde tasks/app.js über {% static %} ein und platziere das Skript so, dass die Liste bereits vorhanden ist, wenn es ausgeführt wird.

Klicke auf „Run“: Die drei Aufgaben erscheinen auf der Startseite.

Probier es selbst

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