黄聪：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的详细说明和使用方法，这里不再赘述，本文主要是使用中的一些代码记录和使用心得，方便以后查阅快速上手使用。

看下下述小段代码：

1. <div class="body">
2. <?php $action_name = $Think.ACTION_NAME; ?>
3. <!-- 头部哟 -->
4. <?php if ($action_name == 'news'): ?>
5. <include file="Brand:header_news" />
6. <?php elseif ($action_name == 'forum'): ?>
7. <include file="Brand:header_forum" />
8. <?php endif; ?>
9. <!-- 资讯的二级分类 -->
10. <div class="cb"></div>
11. <div class="brand-news-nav pjax">
12. <ul class="clearfix">
13. <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
14. <volist name="cat_list" id="vo" key="i">
15. <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>
16. </volist>
17. </ul>
18. </div>
19. <script type="text/javascript">
20. $(function(){
21. $(document).pjax('.pjax a', '#pjax-container',{
22. type:'post',
23. scrollTo:false,
24. });
25. $(document).on('pjax:click', function() {
26. enable_loading = false;
27. })
28. $(document).on('pjax:send', function(){
29. var str = "<p class='tc mt-10'>加载中...</p>";
30. $('#pjax-container').html(str);
31. })
32. //最后一个右侧加边框
33. $(".brand-news-nav ul li").last().children('a').addClass('last');
34. $(".brand-news-nav ul li").click(function(){
35. $(this).addClass('selected').siblings().removeClass('selected');
36. })
37. })
38. </script>
39. <!-- 文章列表页 -->
40. <div class="wrap clearfix">
41. <div class="brand-news-list fl" id="pjax-container">
42. <include file="Brand:article_pjax" />
43. </div>
44. <div class="brand-news-right fr pb-20">
45. <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>
46. <p class="title mt-10">法律支持</p>
47. <ul class="bgc-fff">
48. <volist name="law_list" id="vo">
49. <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
50. </volist>
51. </ul>
52. <button class="btn btn-right mt-10 btn-consult">免费咨询</button>
53. <script type="text/javascript">
54. $(function(){
55. //最后一个需要添加一个last的样式
56. $(".brand-news-right li:last").addClass('last');
57. })
58. </script>
59. </div>
60. </div>
61. </div>

服务器端处理

1. if(is_pjax()){
2. $this->display('article_pjax');
3. }else{
4. $this->display('article');
5. }

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

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

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

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

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