首页 > PHP资讯 > PHP培训技术 > Yii整合pjax(pushstate+ajax)实现无刷新加载页面(图文)

Yii整合pjax(pushstate+ajax)实现无刷新加载页面(图文)

PHP培训技术

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请求时间超过设定时间时,会使用刷新来加载,需要调整插件内的相关参数

PHP培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持28不支持0