首頁 > php教程 > php手册 > TP+Pjax Demo 实现无刷新改变URL的方式

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

WBOY
發布: 2016-06-07 11:43:00
原創
1429 人瀏覽過

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 /> $(&#039;#loading&#039;).hide(); //隐藏loading<br /> });<br /> $(document).pjax(&#039;a&#039;, &#039;#pjax-container&#039;); //内容替换的容器<br /> $(document).on(&#039;pjax:send&#039;, function() {<br /> $(&#039;#loading&#039;).show(); //显示loading<br /> });<br /> $(document).on(&#039;pjax:complete&#039;, function() {<br /> $(&#039;#loading&#039;).fadeOut(1000); //隐藏loading效果<br /> });<br /> </script>

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

AD:真正免费,域名+虚机+企业邮箱=0元

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板