【jQuery入門】郵便番号検索フォームを実装する

ソースコード

<form>
  <input type="text" id="zipcode" name="zipcode" size="30" />
  <input type="button" id="search" value="検索" />
</form>
<div id="prog"><img src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/images/loading.gif" alt=""></div>
<hr />
<div id="result"></div>

$(function () {
  // ローディング表示
  $(document)
    .ajaxStart(function () {
      $("#prog").show();
    })
    .ajaxStop(function () {
      $("#prog").hide();
    })
    .ajaxError(function (e, xhr, opts, err) {
      $('#result').html("<strong>" + err + "</strong>");
    });

  // ローディング非表示
  $("#prog").hide();

  // 検索処理
  var onsearch = function (e) {
    $.get("https://zipcloud.ibsnet.co.jp/api/search", {
      zipcode: $("#zipcode").val()
    }).done(function (data) {
      $("#result").empty();

      const obj = JSON.parse(data);
      if (obj.message !== null) {
        $("#result").text(obj.message);
        return;
      }

      let rows = [];
      console.log(obj.results);
      $.each(obj.results, function (index, value) {
        $.each(value, function (key, value) {
          rows.push($("<dt></dt>").text(key), $("<dd></dd>").text(value));
        });
      });
      $("#result").append($("<dl></dl>").append(rows));
    });
    e.preventDefault();
  };

  $("#search").click(onsearch);
});

See the Pen
jQuery20-1 by shinjiezumi (@sezumi)
on CodePen.