• jQuery

【簡単】ajaxを使って別ページにある一部分のhtmlコードを取得し、読み込む方法【jQuery】

別の下層ページにあるhtmlコードを取得し、現状ページに読み込む方法を知りたい。

iframeは使いたくない。

別ページにある一部のhtmlコードだけ取得したい。

本記事ではjQuery・ajaxを使って、このような悩みを解決します。

※jQueryを使うので、事前にライブラリをCDNもしくはファイルをダウンロードして環境に設置してください。

別ページhtmlを取得するjQueryコード

<script>
  $(function () {
    $.ajax({
      url: "https://●●●.com/●●●.html", // 別ページにあるhtmlページURL
      cache: false,
      datatype: "html",
      success: function (html) {
        var html = $(html).find(".area"); //  別ページにあるhtml内の一部の要素を指定
        $("#area").append(html); // append関数を使って取得したhtmlコードの埋め込み先を指定
      },
    });
  });
</script>
<div id="area">
//ここに読み込まれる
</div>

jQueryとajax（非同期通信）の仕組みを利用して、別ページにあるhtmlコードをページ遷移せず取得し、読み込むコードになります。

使い方は以下の通りです。

上記jQueryコード内のurlに読み込みたいページのURLを入れます。

変数htmlに読み込みたいページの中から必要な一部のhtmlコードをfind関数を使って指定します。

最後にappend関数などを使って、取得したhtmlコードを埋め込む場所を指定すればOKです。

以上で完了です。

まとめ

筆者は別ページにあるhtmlコードを読み込む時、iframeを多用してたのですが、iframeだとページ全体を読み込んでしまい、またフレーム構造である事から一部のコードを取り出せない・レスポンシブに対応できないなどデメリットがありました。

またアナリティクスを使ってクリック数を計測するなどもiframeだと出来ないです。

その点、本記事で紹介したajaxを使う事で一部のコード自体を読み込む事が出来るのでとても便利です。

ぜひ参考に導入してみてください。

以上で解説を終わります。