jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法

Javascript

他のページのhtmlを読み込むのに使うjQueryに$.loadと$.ajaxですが、使い方を調べたので忘れないうちに書いておこうと思います。使いたいときに忘れてそうですので。

$.load

書き方の例

$('読み込ませたい場所').load('読み込ませたいファイル idなどの箇所の指定');

ファイル全体を読み込ませたい場合は"idなどの箇所の指定"はなくて大丈夫です。こちらの方法だと、

  • 記述方法がシンプルでわかりやすい
  • 一気に特定の箇所まで指定できる

というのが良い点かなと思います。

$.ajax

書き方の例

$.ajax({
          type: 'GET',
          url: '読み込ませたいファイル',
          dataType: 'html',
          success: function(data) {
          $('読み込ませたい場所').html($(data).find('idなどの箇所の指定'));
        }
     });

こちらはパッと見た感じ複雑になりました。その分エラーの時の処理などの様々なプロパティが設定出来ます。

サンプルページ

動作のサンプルページは以下から。リンクテキストをクリックすると他のhtmlページの内容を読み込みます。特に動作上の違いはありません。

違い

違う箇所はいろいろあると思いますが

  • 簡単に読みこませるだけだったら$.load
  • いろいろ処理したいなら$.ajax

かなと。

$.load自体が$.ajaxを簡素化した機能みたいなので、迷うようなら$.ajaxを使っておけば間違いないとは思います。

参考リンク