Uma página que chama a API

Parte da seção APIs JSON do Journey de Django da Coddy. Lição 12 de 19.

Seu próprio site também pode chamar a API, usando JavaScript na página inicial. A página é carregada uma vez; depois, o script solicita dados à API e preenche a página sem recarregá-la. A página inicial do projeto inicial não desenha mais a lista por conta própria; o script fará isso. O script, tasks/static/tasks/app.js, já está fornecido; sua parte é criar a página de que ele precisa.

fetch("/api/tasks/") envia uma solicitação GET pelo navegador do visitante, e response.json() lê a resposta. document.getElementById("task-list") encontra o elemento cujo id é task-list, então a página precisa ter um. Um script é executado assim que o navegador lê sua tag, por isso a tag deve ficar depois dos elementos que ele usa, no final do corpo. Carregue-o usando {% static %}:

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

As verificações não conseguem executar JavaScript, então testam a página e o JSON; a prévia executa o script de verdade.

Desafio

Médio

Leia tasks/static/tasks/app.js e, em seguida, em tasks/templates/tasks/home.html, adicione a lista que o script preenche, com o id que ele procura. Carregue tasks/app.js usando {% static %}, em um lugar onde a lista já exista quando o script for executado.

Pressione Executar: Buy milk, Write the report e Call the bank aparecem na página inicial.

Experimente você mesmo

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