首先露珠是tp新手,刚用tp不久,用的版本3.2.3版本,前2天遇到一个问题,用了一套前台模板框架都是固定的,用正常方式每次点击一个页面,整个页面都要加载一遍。网上查了一些信息,都没找到满意答案。一般就是用ajax和iframe来实现,但没有具体的案例。通过取精去粕,对比比较,本帖通过一个简单例子,演示使用ajax完成页面的局部刷新。
例子有2个分组Admin和Home 分组,都用到自己的一套布局模板,以前台为例,简要说明,请大牛勿喷。可能因为太简单,大牛们都不拿出来分享。因为是新手,觉得好多新手想实现局部刷新,但是还不能实现。勿喷勿喷,谢谢!
大体步骤:在布局模板文件中,用jquery实现点击发送ajax请求,在控制器对应的方法,返回请求页面,ajax收到请求,将数据放入指定位置。
1、 在tp项目的common配置文件里,开启布局'LAYOUT_ON'=>true, 'LAYOUT_NAME'=>'layout',Home分组view视图中创建layout.html
我的模板文件中,其中导航栏,关键代码如下:<nav class="youheader">
<ul>
<li class=""><a href="test.html">test</a></li>
<li><a href="test1.html">test1</a></li>
<li><a href="test2.html">test2</a></li>
<li><a href="test3.html">test3</a></li>
<li><a href="test4.html">test4</a></li>
<li><a href="test5.html">test5</a></li>
</ul>
</nav>
在layout头部中加入js代码,此处用jquery实现:<script type="text/javascript">
$(function(){ //上面的代码,通过选择器定位
$(".mobileUI-site-nav ul li").click(function(){
// if($(this).index()==2) //导航栏内容少可以if实现,多的话建议用switch实现。下面是演示用的switch。
// //alert($(this).index());
// {
// jmpurl='{:U("Index/test2")}';
// }
switch ($(this).index()){ //$(this).index(),获取点击li的序号,来判断指向那个页面;
case 2:
jmpurl='{:U("Index/test2")}'; //发送请求的页面,模板是请求的代码,页面对应的控制器方法,用以返回ajax请求数据;
break;
default:
break;
}
htmlobj=$.ajax({url:jmpurl,async:false});

$("#page-wrapper").html(htmlobj.responseText); // 将返回的内容,放入到ID=page-wrapper的结点中;
});
});
</script>2、如果指向页面都是用的一个布局模板,将指定页面 顶部加入{__NOLAYOUT__} ,貌似不用也可以。
3、在对应分组控制器的指定页面方法改成如下代码,貌似实现就是以下一点内容,其他都是虚的。 public function test2(){
//$this->display(); //不要用这句来展示,注释掉;
//获取test2页面,ajax返回eval格式数据,否则是带/r/n的文本,通过eval格式解析成html格式;
$this->ajaxReturn($this->fetch('Index/test2'),'eval'); //$this->fetch('Index/test2'),获取指定填充页面的文本,ajaxReturn函数的第二个参数一定要为eval
}ok,以上就是本话题的所有内容。可能有好多实现方式,本方法也一定不是最好的实现方式。
个人通过以上方式测试通过了局部刷新。希望对想追求而没找到解决方法小伙伴一个思路。谢谢大家

最佳答案

评论() 相关

收藏

赞

wyofukqqq

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