【ThinkPHP5】【tp5】通过Ajax实现分页的局部刷新

效果 

思路分析

        其实要实现的效果就是：点击页码按钮时，局部更新那一页的鲜花列表，而非刷新整个页面。
        那么思路的核心就是：点击页码按钮的时候，通过ajax请求后端返回那一页的鲜花数据，然后在前端通过jquery去拼接html，更新到对应的地方即可。

        明确了整个思路，那么要写的代码也比较明确了：
        1. 需要写一个后端接口（即代码中的：showflowerajax方法）：点击页码按钮，请求该接口返回这一页的鲜花数据（json）
        2. 前端需要写一个ajax请求（即代码中的：AjaxPage方法），在点击页码按钮时发送这个请求

        3. 数据返回之后，需要拼接html代码，通过jquery局部更新鲜花列表（即代码中的：refreshPage方法）

可能存在的疑问

        我猜一下可能有的同学会对有些代码细节存在疑问。其实看代码，要抓住代码的核心思路，能大概看懂先（即上面的思路分析），至于对于某些代码细节的理解，后续调试也会水到渠成。

        我猜同学可能会有下面的疑问

        问题1：showflower方法是干嘛的？跟showflowerajax这个方法有什么关系？

        前面提到showflowerajax方法是一个后端接口，前端在点击页码按钮的时候请求该接口返回对应页的鲜花数据（json）。

        那么第一次访问这个网页时（就是你通过.../showflower.html这个url访问这个网页时），请求的接口其实就是showflower方法。    

        问题2：前端那一排分页按钮是如何生成的呢？为什么点击页码按钮能执行AjaxPage方法，请求后端的showflowerajax接口呢？

       我先给一个结论：生成页码按钮的html代码这部分工作，其实都是thinkphp帮我们做了。

       何以见得？

       很显然，$pageHtml = $flowers->render(); 这一句代码就是拿到了thinkphp生成的页码按钮的html，调试就可以知道了。

       在生成分页按钮的html代码时，thinkphp还帮我们给各个分页按钮注册了点击事件，那么点击分页按钮时，就会执行我们的AjaxPage方法。代码中哪里体现了？

       细心的同学可能关注到了后端的这一句代码：        

paginate(5, false, [
                        'path'=>'javascript:AjaxPage([PAGE]);']); 

       对于thinkphp生成分页按钮的逻辑，大家感兴趣不妨可以点开源码自己去看看，甚至可以自己去重写分页按钮的生成逻辑，并替换掉对应的源码。感兴趣的同学可以看看我的这篇博客。【ThinkPHP5】自定义分页按钮的逻辑和样式（带效果gif）_qq_43290318的博客-CSDN博客​​​​​​效果文件Pagehelper.phphttps://blog.csdn.net/qq_43290318/article/details/105739525        说句题外话，thinkphp的分页做法不算是真正的前后端分离。分页按钮的生成逻辑应该全部由前端来做的。这些等你们深入学习Web开发就知道了，哈哈哈。有需要的同学可以私聊我加我微信

核心代码

服务端，Index控制器中：

public function showflower(/*Request $request*/) {
        /*
         * 参考文档中的“链式操作”
         */
        $flowers = Db::table('flower')
                    ->order(['SelledNum'=>'desc', 'price'=>'asc'])
                    //->select()
                    ->paginate(5, false, [
                        'path'=>'javascript:AjaxPage([PAGE]);']); 

        $pageHtml = $flowers->render();

        $this->assign('flowers', $flowers);
        $this->assign('pageHtml', $pageHtml);
        
        // 如果绑定了参数的，用 $this->fetch()。如果没有绑定参数，可以用return view()
        return $this->fetch(); // fetch方法在Controller中，需要extends
    }
    
    // ajax请求分页内容的方法
    public function showflowerajax(Request $request) {
        // 在url中取出当前的页码
        $page = $request->param('page');
        if (!empty($page)) {
            // 当前页显示的数据
            $flowers = Db::table('flower')
                        ->order(['SelledNum'=>'desc', 'price'=>'asc'])
                        ->paginate(5, false, [
                            'path'=>'javascript:AjaxPage([PAGE]);']); 
                        // 修改按钮的路径，点击按钮执行JS函数AjaxPage()。page（页码）由tp5赋值
            
            // 按钮组的的Html代码
            $pageHtml = $flowers->render();
            
            $data['flowers'] = $flowers;
            $data['pageHtml'] = $pageHtml;
            
            // 向前端返回Json字符串
            return json($data);
        }
    }

前端的JS代码：

        2022/6/10更新：在字符串中引用变量也可以不需要通过+拼接字符串实现。可以使用ES6中的模板字符串，Chrome也支持ES6新特性。例子如下，具体可自行百度。

var name = 'zhangsan';
var str = `我是华师软工的${name}`;
console.log(str); // '我是华师软工的zhangsan'

参考博客：浅谈TP5的ajax无刷新分页_angen2018的博客-CSDN博客