APIを呼び出すページ

CoddyのDjangoジャーニー「JSON API」セクションの一部。レッスン 12/19。

自分のサイトからも、ホームページ上の JavaScript を使って API を呼び出せます。ページが一度読み込まれると、その後スクリプトが API にデータを要求し、ページを再読み込みせずに内容を表示します。スターターのホームページは、リストを自分で描画しなくなり、スクリプトが描画します。スクリプトの tasks/static/tasks/app.js は用意されています。あなたが作るのは、それが必要とするページです。

fetch("/api/tasks/") は訪問者のブラウザーから GET リクエストを送信し、response.json() はレスポンスを読み取ります。document.getElementById("task-list") は id が task-list の要素を見つけるため、ページにその要素が必要です。ブラウザーがスクリプトタグを読み取ると、スクリプトはすぐに実行されるため、そのタグはスクリプトが使う要素より後、body の末尾に置きます。{% static %} を通して読み込みます。

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

チェック機能では JavaScript を実行できないため、ページと JSON をテストします。プレビューではスクリプトが実際に実行されます。

チャレンジ

中級

tasks/static/tasks/app.jsを読み、その後tasks/templates/tasks/home.htmlに、スクリプトが内容を埋めるリストを追加します。スクリプトが参照するIDを付けてください。スクリプトの実行時にリストが存在する位置に、{% static %}を通じてtasks/app.jsを読み込みます。

「実行」を押すと、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>