Strona wywołująca API

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

Twoje API ma wywołującego wewnątrz witryny: JavaScript na stronie głównej. Strona ładuje się raz, a następnie jej skrypt pobiera dane z API i wypełnia stronę bez ponownego ładowania. Skrypt, tasks/static/tasks/app.js, jest już dostępny; Twoim zadaniem jest przygotowanie strony, której potrzebuje.

fetch("/api/tasks/") wysyła żądanie GET z przeglądarki odwiedzającego, a response.json() odczytuje odpowiedź. document.getElementById("task-list") wyszukuje element, którego id ma wartość task-list, więc taki element musi znajdować się na stronie. Skrypt uruchamia się, gdy tylko przeglądarka odczyta jego znacznik, dlatego umieść go za elementami, z których korzysta, na końcu body. Załaduj go tak jak arkusz stylów:

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

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

Wyzwanie

Średni

Przeczytaj tasks/static/tasks/app.js, a następnie w pliku 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 skrypt zostanie uruchomiony.

Naciśnij Run: na stronie głównej pojawią się trzy zadania.

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>