tp5结合ajax实现换一批功能

我们浏览网站的时候经常会看到这样的功能，点击查看下一批，不需要刷新网页，通过ajax异步获取数据即可。实际上这个功能跟下一页非常相近，只不过没有页码，没有刷新网页而已。

那么我们解决这个问题的思路也正是利用了这一点，在做商城的时候我就遇到这个问题。

如下图所示：

下面看一下我们的两段核心代码：

1、tp5服务端获取数据的逻辑代码

public function lst()
{
$data=array();
$brandRes=db(‘brand’)->order(‘id DESC’)->paginate(17);
$data[‘totalPage’]=$brandRes->lastPage();
$brands=$brandRes->items();
$html=”;
$html.='<div class="brand-list" id="recommend_brands"><ul>’;
foreach ($brands as $k => $v) {
$html.='<li><div class="brand-img">
<a href="’.$v[‘brand_url’].’" target="_blank">
<img src="’.config(‘view_replace_str.__uploads__’).’/’.$v[‘brand_img’].’">
</a></div>
<div class="brand-mash">
</div></li>’;
}
$html.='</ul><a href="javascript:void(0);" ectype="changeBrand" class="refresh-btn">
<i class="iconfont icon-rotate-alt">
</i><span>换一批</span></a>’;
$data[‘brands’]=$html;
return json($data);
}

上面的代码中不光是获取了服务端的数据，同时也拼装了前端部分html代码，不过最重要的是解决问题的思路和方法。

前端的html代码：

<div class="brand-list" id="recommend_brands">
<a href="javascript:void(0);" ectype="changeBrand" 
id="refresh-btn" class="refresh-btn">
<i class="iconfont icon-rotate-alt"></i>
<span>换一批</span></a>
</div>

ajax请求代码：

<script type="text/javascript">
var page=0;
var brand_url="{:url(‘index/Brand/lst’)}";
$(function(){
$("#refresh-btn").click();
});
</script>

说白了，这个问题的解决方法就是，没点击一次按钮，就会发送一次请求下一页数据，进而通过ajax无刷新实时的展示在页面上而已。

tp5结合ajax实现换一批功能

猜你喜欢