thinkphp+Pjax Demo 实现无刷新改变URL的方式

最新推荐文章于 2021-04-14 09:47:59 发布

e421083458

最新推荐文章于 2021-04-14 09:47:59 发布

阅读量9.6k

点赞数 1

分类专栏： javascript PHP

PHP 同时被 2 个专栏收录

112 篇文章 2 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

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功能，直接渲染输出页面
            } 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>

下载demo:

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

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