Strona wywołująca API

Część sekcji API JSON ścieżki Django w Coddy. Lekcja 12 z 19.

Twoja własna strona również może wywoływać API z poziomu JavaScriptu na stronie głównej. Strona ładuje się raz, a następnie jej skrypt pobiera dane z API i wypełnia stronę bez ponownego ładowania. Strona główna w projekcie początkowym nie tworzy już samodzielnie listy — zrobi to skrypt. Skrypt, tasks/static/tasks/app.js, jest gotowy; Twoim zadaniem jest przygotowanie strony, której potrzebuje.

fetch("/api/tasks/") wysyła żądanie GET z przeglądarki odwiedzającej osoby, a response.json() odczytuje odpowiedź. document.getElementById("task-list") znajduje element, którego id ma wartość task-list, więc strona musi zawierać taki element. Skrypt uruchamia się, gdy tylko przeglądarka odczyta jego znacznik, dlatego należy umieścić go za elementami, których używa, na końcu treści strony. Załaduj go za pomocą {% static %}:

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

Testy nie mogą uruchamiać JavaScriptu, więc sprawdzają stronę i JSON; podgląd uruchamia skrypt w rzeczywistości.

Wyzwanie

Średni

Przeczytaj tasks/static/tasks/app.js, a następnie w tasks/templates/tasks/home.html dodaj listę, którą wypełnia skrypt, z identyfikatorem, którego szuka. Załaduj tasks/app.js za pomocą {% static %}, umieszczając go tak, aby lista istniała, gdy uruchomi się skrypt.

Naciśnij „Uruchom”: na stronie głównej pojawią się Buy milk, Write the report i Call the bank.

Spróbuj swoich sił

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