SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jQuery】Ajaxを使ったコンテンツの表示方法

内部リンクを全てAjaxによるロードに変える方法です。

利点は

欠点は

といったところでしょうか。

jQueryMobileで使われているように、モバイル系のブラウザでは使える仕組みのようです。
(jQueryMobileではさらに踏み込んで読み込んだコンテンツのキャッシュ等をしているようです)

基本の書き方はとても簡単です。ここでは#contents内の要素を対象にしています。

$(document).on('click', 'a', function(){
    $('#contents').load($(this).attr("href") +' #contents');
    return false;
});

Aタグのクリックイベントを取得して、通常の遷移を止めて.load()で取得しに行きます。load()はURL+セレクタでの取得が可能です。

このままだと外部URLでもAjaxで取りに行ってエラーになってしまうのでいろいろ条件をつけて対応は必要。
属性になにか追加して区別したり、hrefがhttp~でフルに書いてあるものは通常処理をする、等が考えられます。

DEMO

Ajaxを使ったコンテンツの表示方法 – デモ

関連するメモ

コメント