【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.php<?php/** * @author passerbyYSQ * @create 2020年4月24日 下午5:56:33 */namespace think\paginator\driver;use think\Paginator;class Pagehelper extends Paginator { p...https://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'

<script type="text/javascript">
	function AjaxPage(page) {
		$.ajax({
            url:'showflowerajax',
            type:'post',
            dataType:'json',
            data: {page:page}, // 第一个参数是url中的变量名，'page'
            success:function(data){
                //console.log(data)
                //$(".page").html(data.pageHtml);
            	refreshPage(data);
            }
        });
	}
	
	function refreshPage(res) {
		// 替换按钮组的Html代码
		$(".page").html(res['pageHtml']);
		
		var flowers = res['flowers'];
		//console.log(flowers);
		var html = "";
		//$("#content").html(html);
		// 通过打印flowers可知它是个对象，而不是数组，flowers.data才是需要显示的数据
		$.each(flowers.data, function (index, flower) {
			//console.log(flower);
			// 组织Html代码。php中字符串中的变量可以用{$}来表示，js中只能通过“+”拼接
            var str = "<table style='width:700px;border-width:1px;border-style:dotted;' align=center>"
+ "<tr>"
+ "<td rowspan=7 width=170>"
+ "<a href='flowerDetail.php?flowerID=" + flower['flowerID'] + "'><img src='__ROOT__/public/static/picture/" + flower['picturem'] + "' border=0/>"
+ "</a></td>"
+ "<td colspan=2 align=center><div style='font-weight:bold;font-size:medium;height:40px;line-height:40px;color:#000066;text-align:center;border-width:1px;  border-style:solid;border-color:red;'>" + flower['fname'] + "</div></td>"
+ "</tr><tr>"

+ "<td width=50><font size=2>材料：</font></td>"
+ "<td><font size=2>" + flower['cailiao'] + "</font></td>"
+ "</tr><tr>"     
+ "<td width=50><font size=2>包装：</font></td>"
+ "<td><font size=2>" + flower['baozhuang'] + "</font></td>"
+ "</tr><tr>"
+ "<td width=50><font size=2>花语：</font></td>"
+ "<td><font size=2>" + flower['huayu'] + "</font></td>"
+ "</tr><tr>"
+ "<td width=50><font size=2>说明：</font></td>"
+ "<td><font size=2>" + flower['shuoming'] + "</font></td>"
+ "</tr><tr>"
+ "<td colspan=2><div style='text-align:left;font-size: medium; color: #000066;'>"
+ "<div style='text-decoration:line-through;margin-top:8px;'>原价:￥" + flower['price'] + "</div>现价：<font size=4 color=red><b>￥" + flower['yourprice'] + "</b></font></div></td>"
+ "</tr><tr>"
+ "<td colspan=2><a href='__ROOT__/index.php/index/cart/addcart.html?flowerID=" + flower.flowerID + "'><img src='__ROOT__/public/static/image/ingwc_ico.jpg' border=0/></a></td>"

+ "</tr></table>";     
			
			html += str;
        });
		//$("#content").html("");
		$("#content").html(html);
		
	}
</script>

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