<div> <?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></div> <div> <ul> <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a href="https://www.jb51.net/article/{:U("Brand/$action_name")}">全部</a></li> <volist key="i"> <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="https://www.jb51.net/article/{: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>加载中...</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> <div> <include file="Brand:article_pjax" /> </div> <div> <a href="{$adv3[0]['url']}"><img data-url="{$adv3[0]['images']|showImagePath}" src="https://www.jb51.net/__PUBLIC__/index/images/loading270x160.gif"></a> <p>法律支持</p> <ul> <volist> <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a> </volist> </ul> <button>免费咨询</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不会变动，如没有此参数，每次点击时浏览视窗会自动跳转到网页顶部
小结：Pjax实际就是从服务器端返回一段代码片段，而不用刷新页面，并且同时对 url 地址进行修改，这样可以节省资源加载，提升页面加载速度。
附： pjax的github项目地址 https://github.com/defunkt/jquery-pjax
您可能感兴趣的文章: