API'yi Çağıran Bir Sayfa

Coddy'nin Django Journey'sinin JSON API'leri bölümünün bir parçası. Ders 12 / 19.

Senin siten de ana sayfadaki JavaScript üzerinden API'yi çağırabilir. Sayfa bir kez yüklenir, ardından betiği API'den veri ister ve sayfayı yeniden yüklemeden doldurur. Başlangıç projesinin ana sayfası artık listeyi kendi oluşturmuyor; bunu betik yapacak. Betik, tasks/static/tasks/app.js, hazır olarak veriliyor; senin yapman gereken, betiğin ihtiyaç duyduğu sayfayı hazırlamak.

fetch("/api/tasks/"), ziyaretçinin tarayıcısından bir GET isteği gönderir ve response.json() yanıtı okur. document.getElementById("task-list"), id değeri task-list olan öğeyi bulur; bu nedenle sayfada böyle bir öğe bulunmalıdır. Tarayıcı, betik etiketini okur okumaz betiği çalıştırır; bu yüzden etiket, kullandığı öğelerden sonra, gövdenin sonuna yerleştirilir. Betiği {% static %} üzerinden yükle:

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

Kontroller JavaScript çalıştıramaz; bu nedenle sayfayı ve JSON'ı test ederler. Önizleme ise betiği gerçekten çalıştırır.

Görev

Orta

tasks/static/tasks/app.js dosyasını oku, ardından tasks/templates/tasks/home.html dosyasına, betiğin doldurduğu listeyi ve aradığı kimliği ekle. Liste, betik çalıştığında mevcut olacak şekilde {% static %} aracılığıyla tasks/app.js dosyasını yükle.

Çalıştır'a bas: Buy milk, Write the report ve Call the bank ana sayfada görünür.

Kendin dene

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