Eine Seite, die die API aufruft

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

Auch deine eigene Website kann die API aufrufen, und zwar mit JavaScript auf der Startseite. Die Seite wird einmal geladen, danach fragt ihr Skript die API nach Daten und füllt die Seite, ohne sie neu zu laden. Die Startseite des Starterprojekts erstellt die Liste nicht mehr selbst; das übernimmt das Skript. 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. 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 kommt das Tag nach den Elementen, die es verwendet, ans Ende des Bodys. Binde es über {% static %} ein:

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

Die Prüfungen können kein JavaScript ausführen, daher 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 die Liste hinzu, die das Skript befüllt, und gib ihr die ID, nach der es sucht. Binde tasks/app.js über {% static %} ein und platziere es so, dass die Liste vorhanden ist, wenn das Skript ausgeführt wird.

Drücke „Ausführen“: Buy milk, Write the report und Call the bank 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>