效果
思路分析
其实要实现的效果就是:点击页码按钮时,局部更新那一页的鲜花列表,而非刷新整个页面。
那么思路的核心就是:点击页码按钮的时候,通过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>