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
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/'); //浏览器支持Pjax功能,直接渲染输出页面。Bug fix: 兼容非调试模式
} else {
layout(true); //开启模板
$this->display(); //浏览器不支持Pjax功能或F5刷新页面,使用默认的链接响应机制(加载模板)
}
}
}./Lib/IndexAction.class.php (继承于CommonAction)<?php
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布署) <script type="text/javascript">
$(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效果
});
</script>

附件 TPDemo2.zip ( 806.39 KB 下载:767 次 )

评论() 相关

收藏

赞

曼德

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。