PJAX效果
通过url可以跟踪
<script type="text/javascript"> $(document).ready(function(){ $("#main").pjax("a"); });《script》
最终的目的,就是点击a标签时,通过ajax返回的结果将id为main的div内的文字替换为相应的地址内容,url自动更新,同时页面不会重新载入。下面开始实现后端要处理的内容
二.PHP端的实现
php端需要处理的任务主要是两件:1.实现layout视图布局 ?2.判断pjax过来的请求
Yii框架中的实现:
在控制器中对action做如下处理(以Article的index为例):
public function actionIndex() { $this->layout = '//layouts/column1'; $dataProvider = new CActiveDataProvider('Article', array( 'criteria' => array('order' => 'create_time DESC') )); if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) { $this->renderPartial('index', array( 'dataProvider' => $dataProvider, )); } else { $this->render('index', array( 'dataProvider' => $dataProvider, )); }}
效果演示图:
点击article链接或者文章链接后都会出现如下效果页面:
--------------------------------------
jquery-pjax使用中需要注意的事项:
1.返回的模版内容不能为纯文本,需要用html标签包裹
2.插件的使用方法,详情参考github的项目说明,更新后使用方法或有不同
3.对于不支持pushstate的低版本浏览器,pjax插件会自动判断并使用传统的页面加载模式
4.当一个页面的pjax请求时间超过设定时间时,会使用刷新来加载,需要调整插件内的相关参数