Trang gọi API

Thuộc phần API JSON trong hành trình Django của Coddy. Bài học 12 trên 19.

Trang web của bạn cũng có thể gọi API từ JavaScript trên trang chủ. Trang tải một lần, sau đó script yêu cầu dữ liệu từ API và điền vào trang mà không cần tải lại. Trang chủ của phần khởi đầu không còn tự hiển thị danh sách nữa, script sẽ làm việc đó. Script tasks/static/tasks/app.js đã có sẵn, phần của bạn là tạo trang mà script cần.

fetch("/api/tasks/") gửi yêu cầu GET từ trình duyệt của khách truy cập, còn response.json() đọc phản hồi. document.getElementById("task-list") tìm phần tử có id là task-list, vì vậy trang cần có phần tử đó. Script chạy ngay khi trình duyệt đọc thẻ của nó, nên hãy đặt thẻ sau các phần tử mà script sử dụng, ở cuối phần thân trang. Tải script thông qua {% static %}:

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

Phần kiểm tra không thể chạy JavaScript, nên chúng kiểm tra trang và JSON; bản xem trước chạy script thực sự.

Thử thách

Trung bình

Đọc tasks/static/tasks/app.js, rồi thêm danh sách mà script điền vào trong tasks/templates/tasks/home.html, với id mà script tìm kiếm. Tải tasks/app.js thông qua {% static %}, đặt script sao cho danh sách đã tồn tại khi script chạy.

Nhấn nút Chạy: Mua sữa, Viết báo cáo và Gọi cho ngân hàng sẽ xuất hiện trên trang chủ.

Tự làm thử

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