thinkphp+ajax 实现点击加载更多数据

全栈程序员-站长 • 2021年10月30日下午7:00 • 未分类 • 阅读 47

https://blog.csdn.net/a898712940/article/details/78545599?utm_source=blogxgwz8

适用范围：thinkphp3.2和thinkphp5.0

php代码：

public function myorder_list(Request $request){


   $uid = $this->uid;
   $where = array(
       'uid' => $uid,
   );
   $page = $this->request->param('page') ? $this->request->param('page') : 1; //获取请求的页数
   $num  = 10;//请求条数
   $order_list = db('shop_order')
   ->alias('so')
     ->join(config('database.prefix').'shop_order_goods sog','so.id = sog.orderid')
     ->field('so.ordersn,so.pay_price,sog.id,sog.orderid,sog.goodsid,sog.goods_name,sog.goods_price,sog.thumb,sog.total')
    ->where($where)
    ->order("so.createtime", 'desc')
     ->page($page,$num)
     ->select();
     
    foreach ($order_list as $k=>$v){
        $order_list[$k]['total'] = db('member_video')->where('orderid',$v['id'])->count();
    }
   //判断是否为ajax请求，获取更多数据
   $count = count($order_list);
   if($this->request->isPost()){
       if($count<$num){
   //判断是否到尾页
           $order_list[]['id']=0;//到尾页返回0
       }
       return json($order_list);//将数组转成json格式返回
       exit;//中断后面的display()
   }
   $this->assign('order_list',$order_list);
   $this->assign(['num'=>$num,'count'=>$count]);
return $this->view->fetch();
}

html代码：

<ul class="orderlist-wrap" >
 {
    if !empty($order_list)}
   {volist name="order_list" id="vo"}
<li class="orderlist">
<a class="orderlist-a" href="">
<img src="{if !empty($vo.thumb)} {
   $vo.thumb} {else} /uploads/videos/20171109/1627f7f77cefa595bc0ea4b95bdd8f30.jpg {/if}" />
<span class="orderlist-txt-l">
<span class="orderlist-txt-ls1">{
   $vo.ordersn}</span>
<span class="orderlist-txt-ls2">
<i>数量：{
   $vo.total}</i>
<i>总价：<span class="iconfont13 icon-rmb"></span>{
   $vo.pay_price}</i>
</span>
</span>
</a>
<span class="orderlist-txt-r">
<span class="orderlist-txt-r1">待评价</span>
<a class="orderlist-txt-r2">评价</a>
</span>
</li>
{
    /volist}
 {
    else/}
 <div class="tomore" id="nocell" style="text-align: center;line-height: .55rem;" >暂无订单记录...</div>
 {
    /if}
</ul>
{
    if $count egt $num}
<div class="tomore" id="getmore" style="text-align: center;line-height: .55rem;color: #0061ff;">查看更多<i class="iconfont12 icon-gengduo1"></i></div>
{
    /if}

                                <!-- 请求的页数-->
<input type="hidden" name="" id="page" value="2">

js代码：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
   var page = $("#page").val(); //从第二页开始获取数据
$("#getmore").click(function(){
$.ajax({ 
type: "post",
dataType: "json",
url: '{:url("m/member/myorder_list")}',
data: {page:page},
success: function(data) {  
//console.log(data);
var str = "";//定义变量保存内容
$.each(data,function(index,array){
   if (array['id']){
    str += '<li class="orderlist">'+
          '<a class="orderlist-a" href="">'+
          '<img src="'+array['thumb']+'"/>'+
          '<span class="orderlist-txt-l">'+
             '<span class="orderlist-txt-ls1">'+array['goods_name']+'</span>'
             +'<span class="orderlist-txt-ls2">'
             +'<i>数量：'+array['total']+'</i>'
             +'<i>总价：<span class="iconfont13 icon-rmb"></span>'+array['goods_price']*array['total']+'</i>'+
             '</span>'+
          '</span>'+
          '</a>'+
          '<span class="orderlist-txt-r">'+
          '<span class="orderlist-txt-r1">'+'待评价'+'</span>'+
          '<a class="orderlist-txt-r2">'+'评价'+'</a>'+
          '</span>'+
          '</li>';
   }else{
    $("#getmore").html("没有更多内容了..");
   }
 });
$(".orderlist-wrap").append(str); //把HTML添加到容器
var pageval = page++;//页数+1
$("#page").val(pageval);
}
});
});
</script>