Halaman yang Memanggil API

Termasuk bagian API JSON dalam perjalanan Django di Coddy. Pelajaran 12 dari 19.

API-mu memiliki pemanggil di dalam situs: JavaScript pada halaman beranda. Halaman dimuat sekali, lalu skripnya meminta data dari API dan mengisi halaman tanpa memuat ulang. Skrip, tasks/static/tasks/app.js, sudah disediakan; bagianmu adalah halaman yang dibutuhkan skrip tersebut.

fetch("/api/tasks/") mengirim permintaan GET dari browser pengunjung, dan response.json() membaca jawabannya. document.getElementById("task-list") mencari elemen yang id-nya adalah task-list, jadi halaman harus memiliki elemen tersebut. Skrip berjalan segera setelah browser membaca tagnya, jadi letakkan tag itu setelah elemen-elemen yang digunakannya, di akhir body. Muat skrip itu seperti kamu memuat stylesheet:

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

Pemeriksaan tidak dapat menjalankan JavaScript, jadi pemeriksaan menguji halaman dan JSON; pratinjau menjalankan skripnya sungguhan.

Tantangan

Sedang

Baca tasks/static/tasks/app.js, lalu di tasks/templates/tasks/home.html:

Tambahkan list yang diisi oleh skrip, dengan id yang dicari skrip.
Muat tasks/app.js melalui {% static %}, letakkan agar list sudah ada saat skrip dijalankan.

Tekan Jalankan: tiga tugas muncul di halaman beranda.

Coba sendiri

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