他のページの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を使っておけば間違いないとは思います。
参考リンク
コメント