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("加载失败!");
    });