【簡単】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を使う事で一部のコード自体を読み込む事が出来るのでとても便利です。

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

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

Ads

関連記事

WordPress プログラミング

【ワードプレス】head内に自動生成される不要なタグを削除する方法

2021.12.08
75
JavaScript プログラミング

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

2022.04.19
25
WordPress プログラミング

【簡単】wordpressで投稿記事ページ・固定ページをコピーする方法【プラグインで解決】

2022.02.21
55
WordPress プログラミング

wordpressのfeed取得先がEntity: line 2: parser で見れない時の対処方法

2021.10.27
31