Zenn
🦆

[jQuery]Ajaxで祝日一覧を取得する

2022/03/23に公開
JavaScript
jQuery
Ajax
tech

概要

  • Ajaxで祝日一覧を取得し、テーブル表示する覚え書き
    → Holidays JP API | github.ioを使用してます
  • 参考欄のページを参考にひたすら書いただけ

コード

holiday_list.html
<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8">

  <title>祝日一覧</title>
  <meta name="description" content="The Holiday List">
  <meta name="author" content="SitePoint">
  <!-- cssファイルがある場合は読み込み -->
  <!--<link rel="stylesheet" href="css/styles.css"> -->
</head>

<body>
  <!-- jQueryのCDN読み込み -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script>
    $(function(){
      $.ajax({
          url: 'https://holidays-jp.github.io/api/v1/date.json',
          type: 'GET',
          dataType: 'json',
          timeout: 5000
      }).done(function(data){
        /* 通信成功時 */
        $('body').append('<table></table>');
        $('table').attr('border', 1);
        $('table').attr('style', "border-collapse: collapse");
        $('table').append('<tr><th>日付</th><th>名称</th></tr>');
        Object.keys(data).forEach((key) => {
          // $('table').append(`<tr><td>${key}</td></tr>`);
          $('table').append(`<tr><td>${key}</td><td>${data[key]}</td></tr>`);
        });
        $('th').css('background-color', '#CCCCFF');
        $('td').attr('align', 'center');
      }).fail(function(data){
        /* 通信失敗時 */
        $('body').append('<p></p>');
        $('p').append('通信に失敗しました');
      }).always(function(data){
        /* 通信成功・失敗問わず */
        $('body').append('<p></p>');
        $('p').append('以上です');
      });
    });
  </script>
  <!-- javascriptがある場合は読み込み -->
  <!-- <script src="js/scripts.js"></script> -->
</body>
</html>

参考

Discussion