zoukankan      html  css  js  c++  java
  • thinkphp+ajax 实现点击加载更多数据

    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>
  • 相关阅读:
    You are not late! You are not early!
    在同一个服务器(同一个IP)为不同域名绑定的免费SSL证书
    Vue.js Is Good, but Is It Better Than Angular or React?
    It was not possible to find any compatible framework version
    VS增加插件 Supercharger破解教程
    Git使用ssh key
    Disconnected: No supported authentication methods available (server sent: publickey)
    VS 2013打开.edmx文件时报类型转换异常
    asp.net MVC4 框架揭秘 读书笔记系列3
    asp.net MVC4 框架揭秘 读书笔记系列2
  • 原文地址:https://www.cnblogs.com/lxwphp/p/15453817.html
Copyright © 2011-2022 走看看