דף שקורא ל-API

חלק מהיחידה ממשקי API של JSON במסלול ה-Django של Coddy. שיעור 12 מתוך 19.

ל-API שלך יש גורם שקורא לו בתוך האתר: JavaScript בדף הבית. הדף נטען פעם אחת, ואז הסקריפט מבקש מה-API נתונים וממלא את הדף בלי לטעון אותו מחדש. הסקריפט, tasks/static/tasks/app.js, נתון לך; החלק שלך הוא הדף שהוא זקוק לו.

fetch("/api/tasks/") שולח בקשת GET מהדפדפן של המבקר, ו-response.json() קורא את התשובה. document.getElementById("task-list") מוצא את הרכיב שה-id שלו הוא task-list, ולכן הדף חייב להכיל רכיב כזה. סקריפט מתחיל לפעול ברגע שהדפדפן קורא את התג שלו, ולכן התג צריך להופיע אחרי הרכיבים שבהם הוא משתמש, בסוף גוף הדף. טוענים אותו כמו גיליון סגנונות:

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

הבדיקות אינן יכולות להריץ JavaScript, ולכן הן בודקות את הדף ואת JSON; התצוגה המקדימה מריצה את הסקריפט בפועל.

אתגר

בינוני

קראו את tasks/static/tasks/app.js, ואז בתוך tasks/templates/tasks/home.html:

הוסיפו את הרשימה שהסקריפט ממלא, עם המזהה שהוא מחפש.
טענו את tasks/app.js באמצעות {% static %}, במיקום שבו הרשימה כבר קיימת כשהסקריפט פועל.

לחצו על Run: שלוש המשימות מופיעות בדף הבית.

נסו בעצמכם

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