Страница, вызывающая API

Часть раздела JSON API путешествия по Django на Coddy. Урок 12 из 19.

Ваш сайт тоже может обращаться к API с помощью JavaScript на главной странице. Страница загружается один раз, затем скрипт запрашивает данные у API и заполняет страницу без перезагрузки. В стартовом проекте главная страница больше не формирует список самостоятельно — это будет делать скрипт. Скрипт tasks/static/tasks/app.js уже предоставлен; ваша задача — подготовить страницу, которая ему нужна.

fetch("/api/tasks/") отправляет GET-запрос из браузера посетителя, а response.json() читает ответ. document.getElementById("task-list") находит элемент, у которого id равен task-list, поэтому такой элемент должен быть на странице. Скрипт запускается, как только браузер считывает его тег, поэтому этот тег нужно поместить после элементов, которые он использует, в конце body. Подключите его через {% static %}:

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

Проверки не могут запускать JavaScript, поэтому они проверяют страницу и JSON; в предварительном просмотре скрипт запускается по-настоящему.

Задание

Средне

Прочитай tasks/static/tasks/app.js, затем в tasks/templates/tasks/home.html добавь список, который заполняет скрипт, с идентификатором, который он ищет. Подключи tasks/app.js через {% static %}, расположив его так, чтобы список существовал к моменту запуска скрипта.

Нажми «Играть»: на главной странице появятся Buy milk, Write the report и Call the bank.

Попробуйте сами

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