ajaxで他ページからのコンテンツを取得して表示させる

jQuery2017.7.6

最終更新日：2018.1.7 Update!!

ajaxはjavascriptを使った非同期通信という技術で、様々なウェブサイトで使用されています。jQueryを使うことでこのajaxも手軽に実装できるのですが、今回はajaxで他ページからのコンテンツを呼び出して表示させる便利なサンプルを作成してみたいと思います。

ページをURLで指定して、要素内にHTMLとして出力

サンプルコードと合わせてみていきたいと思います。まずは取得したいコンテンツ（＝要素）があるページのURLを指定します。そして、find関数で取得する要素を取得し、その要素を変数へ格納させ、表示させたいHTMLの中の要素へappend関数で出力します。【sample.html】※一部抜粋

<body>
  <script>
    $(function(){
      $.ajax({
        url: 'http://example.com',    // 表示させたいコンテンツがあるページURL
        cache: false,
        datatype: 'html',
        success: function(html) {
            var h = $(html).find('#hoge');    // 表示させたいコンテンツの要素を指定
            $('#wrap').append(h);    // append関数で指定先の要素へ出力
        }
      });
    });
  </script>
  <div id="wrap">
    <!-- ここにajaxで呼び出したコンテンツ（＝要素）が出力される -->
  </div>
</body>

こうすることで、他サイトからHTMLを取得して表示することができます。またリストなどの場合は配列とfor文で表示させる内容数をコントロールすることもできます。【sample.html】※一部抜粋

<body>
  <script>
    $(function(){
        var displayAmount = 5;    // 表示させる数量 
      $.ajax({
        url: 'http://example.com',    // 表示させたいコンテンツがあるページURL
        cache: false,
        datatype: 'html',
        success: function(html) {
            var h = $(html).find('#hoge ul li');    // 表示させたいコンテンツの要素を指定
            for (var i = 0; i < displayAmount; i++) {
                $('#wrap ul').append(h[i]);    // append関数で指定先の要素へ出力
            }
        }
      });
    });
  </script>
  <div id="wrap">
      <ul>
        <!-- ここにajaxで呼び出したコンテンツ（＝要素）が出力される -->
      </ul>
  </div>
</body>

ちょっとしたテクニックですが、使える場面は結構多そうですね。HTMLのファイルサイズも短縮できますのでメリットは大きいかと思います。

【参考】
カラーミーショップで任意のカテゴリをTOPに表示する方法