pajax實現局部刷新效果

我這以ci框架爲例。

1、準備工作

首先引入jquery，再引入pjax。
pjax下載地址：https://github.com/defunkt/jquery-pjax

2、首次加載頁面

php代碼：

public function hot_list(){
        $this->data["code"]=array("1","2","3")
        $this->load->view("/index/index",$this->data);
    }

html:

<div id="pajaxpage">
    <div class="hot_catalogs_cont">
        <a href="/index/indexview?code=1">1</a>
        <a href="/index/indexview?code=2">2</a>
        <a href="/index/indexview?code=3">3</a>
    </div>
    <div>1</div>
</div>

jquery:

$(document).ready(function(){
        $("#").css("height","362px");
        $(document).pjax('.hot_catalogs_cont>a', '#pajaxpage', {'timeout': 100000})
        //$(document).pjax(局部加載請求路徑,父頁面區域divID,{});
    });

3、局部刷新請求的內容

php：

public function indexview(){
        $this->data["code"]=array("1","2","3")
        $_pjax=$this->input->get("_pjax");
        if($_pjax=="#bigdata_index"){
            $this->load->view("/index/indexview",$this->data);
        }else{
            $this->load->view("/index/index",$this->data);
        }
    }

html:indexview這個頁面只放局部刷新的內容，外部css和js不需要在次引用，內部js和css需要拷貝過來

    <div class="hot_catalogs_cont">
        <a href="/index/indexview?code=1">1</a>
        <a href="/index/indexview?code=2">2</a>
        <a href="/index/indexview?code=3">3</a>
    </div>
    <div>1</div>

jQuery：

$(document).ready(function(){
        $("#").css("height","362px");
    });

注意：要實現局部刷新和不重複加載css和js的話一定要把局部刷新的內容重新新建爲新頁面（外部css和js不需要在次引用，內部js和css需要拷貝過來）。

知識拓展：

    $(document).pjax('a[data-pjax]', '.main-wrap', {        // 本頁面的ID
        fragment: '.main-wrap',                          //來源頁的ID
        timeout: 200000000,
        show: 'fade',
        cache: true,  //是否使用緩存
        push: true,
        replace: true,
        //scrollTo: 250,
    });
    //加載過程
    $(document).on('pjax:send', function () { //pjax鏈接點擊後顯示加載動畫
        $("#progress").removeClass("done");//完成，隱藏進度條
        $({property: 0}).animate({property: 100}, {
            duration: 500,
            step: function () {
                var percentage = Math.round(this.property);
                $('#progress').css('width', percentage + "%");
                if (percentage == 100) {
                    $("#progress").addClass("done");//完成，隱藏進度條
                }
            }
        });
    });
    //成功
    $(document).on('pjax:success', function (data, status, xhr, options) {
        $('title').text(data.relatedTarget.innerText + ' - 啊啦資訊');
    });
    //加載結束
    $(document).on('pjax:complete', function () {
        $("#progress").addClass("done");//完成，隱藏進度條
    });
    //失敗
    $(document).on('pjax:error', function () {
        alert("加載失敗!");
    });