APIを呼び出すページ

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

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

fetch("/api/tasks/")は訪問者のブラウザーからGETリクエストを送信し、response.json()は応答を読み取ります。document.getElementById("task-list")は、idがtask-listである要素を探すため、ページにその要素が必要です。ブラウザーがスクリプトのタグを読み取るとすぐにスクリプトが実行されるため、そのタグはスクリプトが使う要素の後、bodyの最後に置きます。スタイルシートと同じ方法で読み込みます。

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

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

チャレンジ

中級

tasks/static/tasks/app.jsを読んでから、tasks/templates/tasks/home.htmlで次のことを行ってください。

スクリプトが内容を書き込むリストを、スクリプトが参照するIDで追加します。
リストが存在してからスクリプトが実行されるように配置し、{% static %}を通じてtasks/app.jsを読み込みます。

Runを押すと、ホームページに3つのタスクが表示されます。

自分で試してみよう

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