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

核心代码

服务端，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>