jQuery編~AjaxとJson~

予約状況がチェックできるよ！

JavaScriptの非同期通信であるAjaxで外部ファイルを読み込み、HTMLを表示させます。読み込むデータはJsonという形式で書かれます。

スピードクライミング体験会

予約状況を確認
ボルダリング体験会

予約状況を確認
リードクライミング体験会

予約状況を確認

HTMLのソースコード

 <ul class="list">
  <li class="gim" id="speed">
    <h2>スピードクライミング体験会</h2>
    <p class="check">予約状況を確認</p>
  </li>
  <li class="gim" id="bouldering">
    <h2>ボルダリング体験会</h2>
    <p class="check">予約状況を確認</p>
  </li>
  <li class="gim" id="lead">
    <h2>リードクライミング体験会</h2>
    <p class="check">予約状況を確認</p>
  </li>
</ul>

CSSのソースコード

.red {
  background-color: #e66289;
}
.green {
  background-color: #9ac76b;
}

JavaScriptのソースコードと概要

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function () {
    $.ajax({ url: "data.json", dataType: "json" })
      .done(function (data) {
        $(data).each(function () {
          if (this.crowded === "yes") {
            var idName = "#" + this.id;
            $(idName).find(".check").addClass("crowded");
          }
        });
      })
      .fail(function () {
        window.alert("読み込みエラー");
      });
    $(".check").on("click", function () {
      if ($(this).hasClass("crowded")) {
        $(this).text("残りわずか").addClass("red");
      } else {
        $(this).text("予約空いています").addClass("green");
      }
    });
  });
</script>

Ajaxによるファイルの読み込み

ページのリンクをクリックすると、ページをWebサーバーからダウンロードしますが、Ajaxはページを切り替えることなくWebサーバーとデータの送受信をするJavaScriptの機能です。
これにより、画面の一部だけを書き換えることが出来るようになります。

Ajaxの基本形

$.ajax({ url: "data.json", dataType: "json" })
.done(function (data) {
　　データがダウンロードできた時の処理
})
.fail(function () {
　　データがダウンロードできなかった時の処理
});

AjaxはjQeryを使った方が簡単に記述できます。
今回設定しているのは「url」と「datatype」の2種類
ダウンロードしたいデータの形式や通信するWebサーバーによってこの設定内容は変わります。

JSON

[
{"id":"speed","crowded":"yes"}, {"id":"bouldering","crowded":"no"}, {"id":"lead","crowded":"no"}
]

JSONはJavaScriptの配列のオブジェクトの文法を取り入れたデータ形式です。

※書式上の注意点

値だけでなくプロパティ名もダブルクォートで書く必要がある
シングルクォートではなく、ダブルクォートで囲む必要がある

クリックされた後の処理

if ($(this).hasClass("crowded")) {
$(this).text("残りわずか").addClass("red");
} else {
$(this).text("予約空いています").addClass("green");
}

redクラスまたはgreenクラスが追加される事により、この<p>にCSSが適用されます。

Ajaxの応用

実際のWebサイトでは、このデータをサーバーサイドで生成することで、最新の情報を受け取れるようにします。
注意点として、データの送受信は原則として、同一のオリジン内に限られます。

予約状況のチェック

ajaxとJson