生活随笔
收集整理的這篇文章主要介紹了
黄聪：pjax使用心得总结
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
初次結識pjax是在使用tower時鐘發(fā)現(xiàn)的。當時使用時發(fā)現(xiàn)網(wǎng)站可以局部刷新，當然我們知道使用ajax也是可以實現(xiàn)局部刷新的。
然而我們知道，使用ajax進行局部刷新時網(wǎng)站的title是不會變化的，并且使用瀏覽器的后退按鈕也不能使網(wǎng)站返回上個狀態(tài)，這時候我們就需要使用pjax了。
?
關于pjax，推薦先閱讀幾個文章
http://my.oschina.net/sub/blog/123447?fromerr=s5Bgun3z
https://github.com/defunkt/jquery-pjax?為pjax的github項目地址
?
在github的項目地址里有關于pjax的詳細說明和使用方法，這里不再贅述，本文主要是使用中的一些代碼記錄和使用心得，方便以后查閱快速上手使用。
看下下述小段代碼：
?
[html]?view plain
?copy <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>?? ?
服務器端處理
?
[php]?view plain
?copy if(is_pjax()){??????$this->display('article_pjax');??}else{??????$this->display('article');??}?? [php]?view plain
?copy function?is_pjax(){??????return?array_key_exists('HTTP_X_PJAX',?$_SERVER)?&&?$_SERVER['HTTP_X_PJAX'];??}?? 其中的主要思想就是當 ? ? .pjax a ? ?進行點擊的時候，將#pjax-container的內容替換為請求后的內容。在后端處理時需要判斷是否是pjax請求，如果是需要進行局部渲染，如果不是進行全部渲染。
因為pjax用到了html5技術，如果瀏覽器不支持html5那么網(wǎng)站會正常進行跳轉式的加載，如果支持那么只是進行局部渲染（但是瀏覽器地址欄中的url會正常跟著a鏈接進行變動）。
注意上述的js代碼中在配置pjax時有個參數(shù)scrollTo:false,加上此參數(shù)表示點擊連接后網(wǎng)頁的scrollBar不會變動，如沒有此參數(shù)，每次點擊時瀏覽視窗會自動跳轉到網(wǎng)頁頂部
版權聲明：本文為博主原創(chuàng)文章，如需轉載，請注明出處。 https://blog.csdn.net/ROVAST/article/details/50678336
轉載于:https://www.cnblogs.com/huangcong/p/8652276.html
總結
以上是生活随笔為你收集整理的黄聪：pjax使用心得总结的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。
