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.
API'nizin site içinde bir çağıranı var: ana sayfadaki JavaScript. Sayfa bir kez yüklenir, ardından betiği API'den veri ister ve sayfayı yeniden yüklemeden doldurur. Betik, tasks/static/tasks/app.js, hazır olarak verilmiştir; sizin yapmanız gereken, betiğin ihtiyaç duyduğu sayfayı oluşturmaktır.
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; dolayısıyla sayfada böyle bir öğe bulunmalıdır. Bir betik, tarayıcı etiketini okur okumaz çalışır; bu nedenle etiket, kullandığı öğelerden sonra, gövdenin sonuna eklenir. Betiği bir stil sayfası yüklediğiniz gibi yükleyin:
{% load static %}
<link rel="stylesheet" href="{% static 'shop/style.css' %}">Kontroller JavaScript çalıştıramaz; bu nedenle sayfayı ve JSON'u test ederler. Önizleme ise betiği gerçekten çalıştırır.
Görev
Ortatasks/static/tasks/app.js dosyasını oku, ardından tasks/templates/tasks/home.html içinde:
- Liste çalıştırıldığında mevcut olacak şekilde
{% static %}aracılığıylatasks/app.jsdosyasını yükle.
Run düğmesine bas: ana sayfada üç görev 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>
Kendini test etBu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.
JSON API'leri bölümündeki tüm dersler
Kendi başına pratik yap: Django playground