调用 API 的页面

本课属于 Coddy Django 学习旅程的“JSON API”单元。第 12 课，共 19 课。

你自己的网站也可以在首页通过 JavaScript 调用 API。页面加载一次后，脚本会向 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 中添加脚本要填充的列表，并设置脚本查找的 id。通过 {% static %} 加载 tasks/app.js，并确保列表在脚本运行时已经存在。

按“运行”按钮，主页上会显示 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>