pjax php demo,thinkphp+Pjax Demo 实现无刷新改变URL的方式 | 学步园

TP3.1.3+Pjax Demo 实现无刷新改变URL的方式

Pjax相关原理及用法可以从下面的网站查看。

welefen版本：https://github.com/welefen/pjax

defunkt版本：https://github.com/defunkt/jquery-pjax [Demo用的是这个]

TP+Pjax Demo实现方法：

./Lib/Common.Action.class.php 【临时开启模板layout(true);的用法见：http://www.thinkphp.cn/info/183.html第三种方式】

class CommonAction extends Action {

protected function render($data) {

$this->assign('data', $data); //控制器传参到模板

if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) {

$this->display(); //浏览器支持Pjax功能，直接渲染输出页面

} else {

layout(true); //开启模板

$this->display(); //浏览器不支持Pjax功能或F5刷新页面，使用默认的链接响应机制(加载模板)

}

}

}

./Lib/IndexAction.class.php (继承于CommonAction)

class IndexAction extends CommonAction {

public function index() {

$data['name'] = 'ThinkPHP+Pjax Demo';

$this->render($data);

}

public function about() {

$data['name'] = '测试传参。';

$this->render($data);

}

}

./TPL/layout.html (模板中Pjax布署)

$(document).ready(function(){

$('#loading').hide(); //隐藏loading

});

$(document).pjax('a', '#pjax-container'); //内容替换的容器

$(document).on('pjax:send', function() {

$('#loading').show(); //显示loading

});

$(document).on('pjax:complete', function() {

$('#loading').fadeOut(1000); //隐藏loading效果

});

下载demo:

http://www.thinkphp.cn/code/download/id/466.html

另外补充一下bootstrap这个东西不错。