TP+Pjax Demo 实现无刷新改变URL的方式
- WBOY原創
- 2016-06-07 11:43:001428瀏覽
TP3.1.3+Pjax Demo 实现无刷新改变URL的方式
Pjax相关原理及用法可以从下面的网站查看。
welefen版本：https://github.com/welefen/pjax
defunkt版本：https://github.com/defunkt/jquery-pjax [Demo用的是这个]
支持Pjax功能的浏览器（HTML5）：http://caniuse.com/#search=pushstate
TP+Pjax Demo实现方法：
./Lib/Common.Action.class.php 【临时开启模板layout(true);的用法见：http://www.thinkphp.cn/info/183.html第三种方式】<?php <br />
class CommonAction extends Action {<br>
protected function render($data) {<br>
$this->assign('data', $data); //控制器传值到模板<br>
<br>
if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) {<br>
$this->display('','','','','pjax/'); //浏览器支持Pjax功能，直接渲染输出页面。Bug fix: 兼容非调试模式<br>
} else {<br>
layout(true); //开启模板<br>
$this->display(); //浏览器不支持Pjax功能或F5刷新页面，使用默认的链接响应机制（加载模板）<br>
}<br>
}<br>
}./Lib/IndexAction.class.php (继承于CommonAction)<?php <br />
class IndexAction extends CommonAction {<br>
public function index() {<br>
$data['name'] = 'ThinkPHP+Pjax Demo';<br>
$this->render($data);<br>
}<br>
<br>
public function about() {<br>
$data['name'] = '测试传参。';<br>
$this->render($data);<br>
}<br>
}./TPL/layout.html （模板中Pjax布署） <script><br />
$(document).ready(function(){<br />
$('#loading').hide(); //隐藏loading<br />
});<br />
$(document).pjax('a', '#pjax-container'); //内容替换的容器<br />
$(document).on('pjax:send', function() {<br />
$('#loading').show(); //显示loading<br />
});<br />
$(document).on('pjax:complete', function() {<br />
$('#loading').fadeOut(1000); //隐藏loading效果<br />
});<br />
</script>
TPDemo2.zip
( 806.39 KB 下载：355 次 )
AD：真正免费，域名+虚机+企业邮箱=0元