דף שקורא ל-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, ולכן הדף חייב לכלול אלמנט כזה. סקריפט רץ ברגע שהדפדפן קורא את התג שלו, ולכן התג צריך להופיע אחרי האלמנטים שבהם הוא משתמש, בסוף גוף הדף. טענו אותו באמצעות {% static %}:

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

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

אתגר

בינוני

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

לחץ על "הרצה": Buy milk, Write the report ו-Call the bank מופיעים בדף הבית.

נסו בעצמכם

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