jqueryとajaxを使ってページを切り替える方法

ajaxとは、ページ全体を再度読み込みをせずに、一部だけを非同期で切り替える手法です。
これを行うことで、ユーザーがページが切り替わるときにかかるストレスを減らせます。

はじめに1.htmlを読みこみ、下の1、2、3、とクリックすることでページを2.html、3.htmlと切り替えます。

サンプル

解説

html

<div id="photo_conteiner">
<p id="title">フォトギャラリー</p>
<div id="photo_cont">
<p class="loading"><img src="loading.gif" /></p>
</div>
<ul class="pager">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
</ul>
</div>

1.html

<p style="text-align:center; font-size:0.8em; line-height:1.4em;">
<img src="pengin.jpg" /><br />ペンギンさん</p>

2.html

<p style="text-align:center; font-size:0.8em; line-height:1.4em;">
<img src="koala.jpg" /><br />コアラさん</p>

3.html

<p style="text-align:center; font-size:0.8em; line-height:1.4em;">
<img src="hydrageea.jpg" /><br />アジサイ</p>

jquery

$(function(){
  PhotoCont = $("#photo_cont");
  PhotoCont.load($("#pager a:first").attr("href"));
  $("#pager a:first").addClass("selected");
  $("#pager a").click(function(){
    PhotoCont.html('<p class="loading"><img src="loading.gif"></p>');
    PhotoCont.data("file", $(this).attr("href"));
    $('html,body').animate({scrollTop: $("#title").offset().top-40 }, 
　　'slow','swing',function(){
      PhotoCont.load(PhotoCont.data("file"));
    });
  $("#pager a").removeClass("selected");
  $(this).addClass("selected");
  return false;
  });
});

個別解説

PhotoCont = $("#photo_cont");

$("#photo_cont");を何度も使うので変数PhotoContに入れます。

PhotoCont.load();

#photo_contの部分に.loadで()の中身を読み込ませます。

$("#pager a:first").attr("href")

これは#pagerの始めのaタグのhref属性値ここでは、1.htmlを読み込みます。

PhotoCont.load($("#pager a:first").attr("href"));
↓
$("#photo_cont").load(1.html)

ということです。

 $("#pager a").click(function(){

aタグをクリックしたときにfunction()以下が実行されます。

PhotoCont.html('<p class="loading"><img src="loading.gif"></p>');

#pohoto_contの部分を読み込んだhtmlに書き換えます。

PhotoCont.data("file", $(this).attr("href"));

.data()は一時保存する関数で、fileという変数に今クリックしたaタグのhref属性値を保存します。

$('html,body').animate({scrollTop: $("#title").offset().top-40 },
　 'slow','swing',function(){…});

これは、スクロールアニメーションの設定です。

PhotoCont.load(PhotoCont.data("file"));

fileに保存していたhref=”?.html”の属性値を読み込み、#photo_contの部分に表示させます。

 $("#pager a").removeClass("selected");

以前aタグにclass="selected"をつけていたものを消します。

$(this).addClass("selected");

クリックしたaタグにclass="selected"をつけます。

return false;

aタグをクリックした時にイベントを行うときは必ず必要になります。
これを行わないとクリックした時にページに飛んでしまいます。

ページのある部分だけを取り出すとき

例えば、

の赤枠部分だけを読み込みたいということがあるとき、
<div id="tag">???</div>に囲まれているとします。
.loadで読み込むときにしてすることにより可能になります。

PhotoCont.load($("#pager a:first").attr("href"));
↓
PhotoCont.load($("#pager a:first").attr("href")+"#tag");