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

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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112766.html原文链接:https://javaforall.net

(0)
上一篇 2021年10月30日 下午7:00
下一篇 2021年10月30日 下午8:00


相关推荐

  • Java面试之 OOAD & UML

    Java面试之 OOAD & UMLJava面试之 OOAD & UML

    2022年4月22日
    42
  • Matlab 分段函数怎么画 表示方式 (推荐)

    Matlab 分段函数怎么画 表示方式 (推荐)在很长一段时间里面,我都只用上了连续或可导函数(也指那种可以用一个函数表达式表示),结果在这次布置的作业必须要用到分段函数,如下图,总不能通过一条线一条线的plot出来吧。对于这样一个分段函数而言,有以下两种方式可以很好的解决利用逻辑表达式比如第一个就可以表示为:即当t在某一个范围内那段函数才生效,否则乘上逻辑式因子就为0,得到的效果图如下:利用阶跃函数Heavisi…

    2022年5月1日
    128
  • 跳表(skiplist)的理解

    跳表(skiplist)的理解听到跳表 skiplist 这个名字 既然是 list 那么应该跟链表有关 跳表是有序链表 但是我们知道 即使对于排过序的链表 我们对于查找还是需要进行通过链表的指针进行遍历的 时间复杂度很高依然是 O n 这个显然是不能接受的 是否可以像数组那样 通过二分法进行查找呢 但是由于在内存中的存储的不确定性 不能这做 但是我们可以结合二分法的思想 没错 跳表就是链表与二分法的结合 1 链表

    2026年3月26日
    3
  • 极限的定义((δ ε X x n ∀ ∃表示的)7种极限存在情况和21种极限不存在的情况总结)

    极限的定义((δ ε X x n ∀ ∃表示的)7种极限存在情况和21种极限不存在的情况总结)极限极限存在的七种情况为:1数列的极限2趋近于x0的极限3趋近于x0+的极限4趋近于x0-的极限5趋近于无穷的极限6趋近于无穷大的极限7趋近于无穷小的极限δεXxn∀∃∞极限存在的定义limxn(n趋于无穷大)=a的定义;∀ε>0∃N∈N+当n>N时/xn-a/<εlimf(x)=a;(x趋于x0)∀ε>0∃δ>0当0</x-x0/<δ时/f(x)

    2022年5月11日
    119
  • 2021.5.2 idea 激活码(最新序列号破解)[通俗易懂]

    2021.5.2 idea 激活码(最新序列号破解),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    166
  • 解决 无法解析名称 NaiveBayes.fit。/i get Undefined variable “NaiveBayes“ or class “NaiveBayes.fit“.

    解决 无法解析名称 NaiveBayes.fit。/i get Undefined variable “NaiveBayes“ or class “NaiveBayes.fit“.应用朴素贝叶斯分类器时候,发现报错无法解析名称NaiveBayes.fit这是因为你想用NaiveBayes。适用于MATLABR2018b。根据NaiveBayes的R2014b发布说明,fit被fitNaiveBayes取代:同时根据R2018a发布说明fitNaiveBayes被fitcnb取代。因此,使用fitcnb即可。将NaiveBayes.fit改为fitcnb就好啦!!!参考链接:链接:点击这里.打个小广告啊啊啊打个小广告,欢迎关注我的公众号“麦香E站”,分

    2025年5月27日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号