黄聪：pjax使用心得总结

初次结识pjax是在使用tower时钟发现的。当时使用时发现网站可以局部刷新，当然我们知道使用ajax也是可以实现局部刷新的。

然而我们知道，使用ajax进行局部刷新时网站的title是不会变化的，并且使用浏览器的后退按钮也不能使网站返回上个状态，这时候我们就需要使用pjax了。

 

关于pjax，推荐先阅读几个文章

http://my.oschina.net/sub/blog/123447?fromerr=s5Bgun3z

https://github.com/defunkt/jquery-pjax 为pjax的github项目地址

 

在github的项目地址里有关于pjax的详细说明和使用方法，这里不再赘述，本文主要是使用中的一些代码记录和使用心得，方便以后查阅快速上手使用。

看下下述小段代码：

 

<div class="body">
    <?php $action_name = $Think.ACTION_NAME; ?>

    <!-- 头部哟 -->
    <?php if ($action_name == 'news'): ?>
        <include file="Brand:header_news" />
    <?php elseif ($action_name == 'forum'): ?>
        <include file="Brand:header_forum" />
    <?php endif; ?>

    <!-- 资讯的二级分类 -->
    <div class="cb"></div>
    <div class="brand-news-nav pjax">
        <ul class="clearfix">
            <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
            <volist name="cat_list" id="vo" key="i">
                <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>
            </volist>
        </ul>
    </div>

    <script type="text/javascript">
        $(function(){
            $(document).pjax('.pjax a', '#pjax-container',{
                type:'post',
                scrollTo:false,
            });
            $(document).on('pjax:click', function() {
                enable_loading = false;
            })
            $(document).on('pjax:send', function(){
                var str = "<p class='tc mt-10'>加载中...</p>";
                $('#pjax-container').html(str);
            })

            //最后一个右侧加边框
            $(".brand-news-nav ul li").last().children('a').addClass('last');
            $(".brand-news-nav ul li").click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');
            })
        })
    </script>

    <!-- 文章列表页 -->
    <div class="wrap clearfix">
        <div class="brand-news-list fl" id="pjax-container">
            <include file="Brand:article_pjax" />
        </div>
        <div class="brand-news-right fr pb-20">
            <a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a>
            <p class="title mt-10">法律支持</p>
            <ul class="bgc-fff">
                <volist name="law_list" id="vo">
                    <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
                </volist>
            </ul>
            <button class="btn btn-right mt-10 btn-consult">免费咨询</button>
            <script type="text/javascript">
                $(function(){
                    //最后一个需要添加一个last的样式
                    $(".brand-news-right li:last").addClass('last');
                })
            </script>
        </div>
    </div>
</div>

 

服务器端处理

 

if(is_pjax()){
    $this->display('article_pjax');
}else{
    $this->display('article');
}

//判断是否是pjax请求
function is_pjax(){
    return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
}

其中的主要思想就是当     .pjax a    进行点击的时候，将#pjax-container的内容替换为请求后的内容。在后端处理时需要判断是否是pjax请求，如果是需要进行局部渲染，如果不是进行全部渲染。

因为pjax用到了html5技术，如果浏览器不支持html5那么网站会正常进行跳转式的加载，如果支持那么只是进行局部渲染（但是浏览器地址栏中的url会正常跟着a链接进行变动）。

注意上述的js代码中在配置pjax时有个参数scrollTo:false,加上此参数表示点击连接后网页的scrollBar不会变动，如没有此参数，每次点击时浏览视窗会自动跳转到网页顶部

版权声明：本文为博主原创文章，如需转载，请注明出处。 https://blog.csdn.net/ROVAST/article/details/50678336