jQueryとAjaxを使ってphpのGETでページを読み込ませる

Ajaxを使って非同期で別のページを読み込むというのを前にも書いたとおりやってみたかったので作ってみました。jQueryもphpもいつも調べながらなので備忘録として残しておきます。

html

<div id="navi">
    <ul>
        <li><a href="page.php?id=1">1のページ</a></li>
        <li><a href="page.php?id=2">2のページ</a></li>
        <li><a href="page.php?id=3">3のページ</a></li>
        <li><a href="page.php?id=4">4のページ</a></li>
    </ul>
</div>
<div id="page">
</div>

 

jQuery

$(function(){
    //ページを表示させる箇所の設定
    var $content = $('#page');
    //リンク先のurl
    var url = "page.php";
    //最初のページ
    var first = "id=1";

    //ボタンをクリックした時の処理
    $("#navi a").click(function(event) {
        event.preventDefault();
        //#navi aのhrefにあるリンク先を保存
        var link = $(this).attr("href");
        //リンク先アドレスのパラメータを取得
        var link = link.replace(url+"?", "");
        //パラメータが今と同じであれば遷移しない
        if(link == lastpage){
            return false;
        }else{
        $content.hide(0, function() {
            getPage(link);
        });
        //今のパラメータを保存
        lastpage = link;
        }
    });

    //初期設定
    getPage(first);
    var lastpage = first;

    //ページを取得してくる
    function getPage(elm){
        $.ajax({
            beforeSend: function(xhr){
                xhr.overrideMimeType('text/html;charset=Shift\_JIS');
            },
            type: 'GET',
            url: url,
            data: elm,
            success: function(data){
                $content.html(data).show(0);
            },
            error:function() {
                alert('問題がありました。');
            }
        });
    }
});

smartyを使ったページを読み込ませるのでGETを使っていますが、そうじゃなければPOSTを使った方がよさそうです。