صفحة تستدعي 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 %}، وضعه في موضع تكون فيه القائمة موجودة عند تشغيل البرنامج النصي.

اضغط على «تشغيل»: ستظهر «اشترِ الحليب» و«اكتب التقرير» و«اتصل بالبنك» على الصفحة الرئيسية.

جرّب بنفسك

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