zoukankan      html  css  js  c++  java
  • ThinkPHP AJAX分页及JS缓存的应用

    //AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右
    主要实现是需要将分页中的每个链接都改为AJAX请求
    
    //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中
    //实现方法:创建一个数组,将需要缓存的数据保存在数组中,需要使用时调用即可;参加兄弟连PHP项目视频22第45分钟左右
    var cache=new Array(); //创建一个用于缓存的数组
    function setpage(index,data) {
    if (!cache[index]) { //当缓存不存在时,则进行缓存
    cache[index]=data;
    }else { //缓存存在时,则读取缓存
    xxx=cache[index];
    }
    }
    


    一、控制器中分配显示主页面

    public function index(){
    $this->assign('time',time());  //页面按需进行查询-分配等就行,不需要对分页数据进行查询
    $this->display();
    }
    

    注:主页不需要对分页数据进行查询

    二、在主页中创建一个DIV容器用于展示分页内容

    1、HTML需求

    {$time}  //分页以外的数据,这些数据不会受分页的影响
    <div id='ajaxpage'>  //分页容器
    <div class='page' style='display:none;'><a href="{:U('ajaxPage',array('p'=>1))}" title="">自动点击执行AJAX请求显示第一页内容</a></div>  //需要创建一个链接,用于向AJAX分页自动发送第一页的请求
    </div>
    

    注:需要自己创建一个链接,指向分页控制器,并传入p=1;这个链接的作用是用jquery自动点击获取第一页数据;HTML的构造需要和分页的相同,这样jquery的AJAX请求才能正常获取a标签信息;如这里的构造是class=page里的a,与分页链接相同

    2、JQuery需求

    var cache=new Array(); //--创建一个用于缓存的数组,用于前端JS数据缓存
    //这是分页中各个分页的AJAX请求
    $(function(){
    $('#ajaxpage').on('click','.page a',function () { //使用on()进行动态绑定事件;非动态是$('.page a').click();on()里的第二个参数是AJAX中动态绑定的选择器,而$('#ajaxpage')选取AJAX外的合适的DOM,通常是包 过AJAX内容的那个DOM
    var url=$(this).attr('href');   //取得分页a标签链接地址,正好是要提交的控制器和传参:Index/ajaxPage/p/1
    if (cache[url]) { //--如果缓存存在,则读取缓存
    $('#ajaxpage').html(cache[url]);
    }else { //否则进行ajax请求
    $.ajax({
    type: "GET",
    url:url,    //请求URL
    success:function(data){
    $('#ajaxpage').html(data);     //将分页控制器输出的模版加载到容器中
    cache[url]=data; //--将返回的数据存入缓存
    //alert(url);  //开启这里可以判断缓存是否生效
    }
    });
    }
    return false;     //使a标签失效,防止页面跳转
    });
    });
    

    注:必须用on进行动态绑定;接收返回的数据直接使用html()加载进模版指定的位置,不用对数据进行HTML格式组合

    //需要先使用trigger当页面加载完自动点击一次创建的链接,完成首页数据的AJAX请求
    $(function () {
    $('.page a').trigger('click');
    });
    注:需要写在AJAX请求代码的下面;模拟点击的时候,就会请求上面的AJAX了
    

    三、控制器中分页查询

    public function ajaxPage(){
    $question = M("question");
    import('ORG.Util.Page'); //引入分页类
    $count = $question->where('question_category = 49 AND status = 0')->count(); //查询出总条数
    $page=new Page($count,10); //$count:总条数,10:每页显示条数$page->lastSuffix = false;
    //设置分页类,这里设置的是最下面那排分页数据的样式
    $Page->rollPage = 3; //页面显示的页数,默认是5
    $page->setConfig('header','条记录');  //设置显示的文字,这5项都使用的默认值
    $page->setConfig('prev','上一页');
    $page->setConfig('next','下一页');
    $page->setConfig('first','首页');
    $page->setConfig('last','尾页');
    $page->setConfig('theme',"<b>共%totalRow%%header% %nowPage%/%totalPage% 页 %first% %prePage% %upPage% %linkPage% %downPage% %nextPage% %end%</b>"); //设置显示的具体内容,可以在这里使用HTML CSS等样式
    $limit=$page->firstRow.','.$page->listRows; //调用分页类的属性;确定查询的数据是从第几个开始取,取出多少个
    $list = $question->field('question_price,question_id,question_startTime,question_name,question_title,pay')->where('question_category = 49 AND status = 0')->order('question_startTime DESC')->limit($limit)->select();//使用field()方法取出需要的字段,order()方法排 序,limit()方法决定取出的数据
    $this->list=$list; //分配给模版,等同于assign()
    $this->assign('page',$page->show()); //将分页类分配给模版
    $this->display();  //这里直接使用display()而不是ajaxReturn()
    }
    

    注:这里就只对分页内容进行查询,并使用display()输出模版,而不是ajaxReturn()返回数据

    四、分页内容显示

    <foreach name='list' item='v'>
    <tr>
    <td>{$v['question_price']}</td>
    <td>{$v['pay']}</td>
    <td>{$v['question_title']}</td>
    <td>{$v['question_name']}</td>
    <td>{$v['question_startTime']|date='Y-m-d H:i:s',###}</td>
    <td><a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'1','id'=& gt;$v['question_id']))}">退回</a>/<a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'2','id'=& gt;$v['question_id']))}">通过</a>/<a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'8','id'=>$v['question_id']))}" onclick='return confirm("你确定删除吗?")'>回收站</a></td>
    </tr>
    </foreach>
    <tr>
    <td colspan="6" class='page'>  //这里的class=page和首次点击的结构相同
    {$page}
    </td>
    </tr>
    

    注:这里的HTML只要分页的标签即可,不能有<html><body>这些标签

    结 语:这样的好处是将分页内容以模版形式构建,而不需要在AJAX请求的回调函数中构建,JS里写HTML各种蛋疼啊~因为是模拟点击获取的分页内容,所以 在第一次页面加载完成时分页内容的显示会稍有延迟;当然,也可以在首页中就将分页第一页查询出来分配给模版并显示,但这样代码就会重复很多;也可以在后台 将分页查询进行封装,前台使用<include>包含分页模版,这就看个人需求了

  • 相关阅读:
    免费的mysql客户端管理工具
    vue配置反向代理
    composer下载地址
    mysql多个字段模糊查询是否包含某个词
    Laravel 7 中文文档
    datatable显示文字改为中文
    MongoDB
    node 与 Ajax 的等待响应
    关于 <!DOCTYPE html> 对移动端和PC端的影响
    Vue中 scoped属性
  • 原文地址:https://www.cnblogs.com/3body/p/5416381.html
Copyright © 2011-2022 走看看