javascript - TP框架里如何做AJAX分页无刷新？

Question

分页已经做出来了，但是点击下一页就刷新一次。在网上搜索了一下AJAX的使用方法，但是很多都看不懂，可能是之前学的不够扎实吧，现在请教各位大神,数据是可以拿到了，点击按钮的路径还是没改变

Answer 1

var g='';
var url='';
var param=['p':g];
 $.get(url, param, function() { 
        
 }) ;  

Answer 2

1、返回总记录数
2、返回第一页的数据渲染
3、根据总记录数和分页条数，计算分页并渲染
4、点击页码，发起ajax请求，返回新一页的数据，然后渲染

Answer 3

你只需要把要替换的部分 用 ajax返回过来的值给替换级就好了。

Answer 4

用ajax请求

Answer 5

我用的是dropload这个插件，每次加载只需要将页码传过去，后端用fetch把内容拼好返回，如果没有数据可以直接锁定不再请求，挺好用

Answer 6

直接在tp分页类里自定义一个AJAX分页的

/** 分页显示ajax输出
     * @access public
     */
    public function ajaxShow() {
        if(0 == $this->totalRows) return '';
        $p = $this->varPage;
        $nowCoolPage  = ceil($this->nowPage/$this->rollPage);
        $url  =  $_SERVER['REQUEST_URI'].(strpos($_SERVER['REQUEST_URI'],'?')?'':"?").$this->parameter;
        $parse = parse_url($url);
        $idtagert = ($parse['fragment'])?"#".$parse['fragment']:"";
        if(isset($parse['query']) || isset($parse['fragment'])) {
            parse_str($parse['query'],$params);
            unset($params[$p]);
            $querycount = count($params);
            $url   =  $parse['path'].'?'.http_build_query($params);
        }else{
            $querycount = 0;
        }
        $pspan = ($querycount==0)?"":"&";
        //上下翻页字符串
        $upRow          =   $this->nowPage-1;
        $downRow        =   $this->nowPage+1;
        if ($upRow>0){
            $upPage     =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=".$upRow.">".$this->config['prev']."</a>";
        }else{
            $upPage     =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=".$upRow.">".$this->config['prev']."</a>";
        }

        if ($downRow <= $this->totalPages){
            $downPage   =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=".$downRow.">".$this->config['next']."</a>";
        }else{
            $downPage   =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);'>".$this->config['next']."</a>";
        }
        // << < > >>
        if($nowCoolPage == 1){
            $preRow     =   $this->nowPage-$this->rollPage;
           // $prePage    =   "<a href='".str_replace('__PAGE__',$preRow,$url)."' >上5页</a>"; //上5页改成了 <<
            $theFirst   =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=1 >".$this->config['first']."</a>";
        }else{
            $preRow     =   $this->nowPage-$this->rollPage;
           // $prePage    =   "<a href='".str_replace('__PAGE__',$preRow,$url)."' >上5页</a>"; //上5页改成了 <<
            $theFirst   =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=1 >".$this->config['first']."</a>";
        }
        if($nowCoolPage == $this->coolPages){
            $nextPage   =   '';
            $theEnd     =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=".$theEndRow." >".$this->config['last']."</a>";
        }else{
            $nextRow    =   $this->nowPage+$this->rollPage;
            $theEndRow  =   $this->totalPages;
           // $nextPage   =   "<a href='".str_replace('__PAGE__',$nextRow,$url)."' >下5页</a>";    // 下5页 改成了 >>
            $theEnd     =   "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=".$theEndRow." >".$this->config['last']."</a>";
        }
        // 1 2 3 4 5
        $linkPage = "";
        for($i=1;$i<=$this->rollPage;$i++){
            $page       =   ($nowCoolPage-1)*$this->rollPage+$i;
            if($page!=$this->nowPage){
                if($page<=$this->totalPages){
                    $linkPage .= "<a class='btn pl-7 pr-7 pt-2 pb-2' href='javascript:void(0);' data-page=" .$page.">".$page."</a>"; //去掉了此处的空格
                }else{
                    break;
                }
            }else{
                if($this->totalPages != 1){
                    // 当前页
                    $linkPage .= "<a class='btn pl-7 pr-7 pt-2 pb-2 font-green-meadow font-white font-lg bold'  data-page=" .$page." href='javascript:void(0);'>".$page."</a>";
                }
            }
        }
        $pageStr     =   str_replace(
            array('%header%','%nowPage%','%listRows%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),
            array($this->config['header'],$this->nowPage,$this->listRows,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);
        return $pageStr;
    }

调用的时候

//分页处理 
    $count = M('*')->where($where)->count();
    $Page  = new CustomPage($count,$filter['page_size']);
    $p = $Page->ajaxShow();//$p = $Page->show();
    $Lsql = "{$Page->firstRow},{$Page->listRows}";

模板用js处理

    //翻页事件
        $("#ajax_lists").delegate(".sfc-page a", "click", function() {
            var page = $(this).data("page");
            goods_list.search.defaultData.p = page;
            ajax_data("__CONTROLLER__/****",'');
        });

//请求商品列表
    function ajax_data(url,params) {
           SFC_Ajax.request({type:"get",method:url,callback:function(data){
               // console.log(data);
               $('#ajax_lists').html(data);
           }},params);
    };