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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 网络常用端口号大全图片_windows关闭不必要的端口

    网络常用端口号大全图片_windows关闭不必要的端口端口号—具有网络功能的应用软件的标识号。注意,端口号是不固定的,即可以由用户手工可以分配(当然,一般在软件编写时就已经定义)。当然,有很多应用软件有公认的默认的端口,比如FTP:20和21,HTTP:80,TELNET:23等等,这里就不一一列举了。一个软件可以拥有多个端口号,这证明这个软件拥有不止一个网络功能。0-1023是公认端口号,即已经公认定义或为将要公认定义的软件保留的,而102…

    2022年9月13日
    0
  • FPN详述

    FPN详述详细讲解特征金字塔(FPN)这个网络的结构。

    2022年6月6日
    39
  • idea控制台中文乱码怎么解决_idea控制台打印中文乱码

    idea控制台中文乱码怎么解决_idea控制台打印中文乱码IDEA 控制台中文乱码处理

    2022年4月20日
    172
  • 负采样的理解[通俗易懂]

    负采样的理解[通俗易懂]我对负采样理解来自于word2vec算法;比如说 love和me两个单词;使用特殊思维模式;假设整个词汇表只有100个单词;love表示成one-hot向量;me表示成one-hot向量;模型输入为love的one-hot向量;模型输出为me的one-hot向量;假设模型的神经网络结构为100*10*100;输出层100个;输出层中除了me对应位置的1外,其他全是0;称…

    2022年6月24日
    40
  • Prophet调参[通俗易懂]

    Prophet调参[通俗易懂]本篇主要讲解实际运用中Prophet调参的主要步骤以及一些本人实际经验。一参数理解篇classProphet(object):def__init__(self,growth=’linear’,changepoints=None,n_changepoints=25,changepoint_range=0.8,yearly_seasona

    2022年6月16日
    108
  • gif录屏与gif图片合成工具「建议收藏」

    gif录屏与gif图片合成工具「建议收藏」现在好多gif图片合成是收费的,而且可能还不太好用,这里分析的gif合成软件是个比较老的软件,但是用着还是挺好用的。还有一个录屏软件,录制保存为gif文件。百度网盘分享,无需积分:链接:https://pan.baidu.com/s/1HukTW6yJvqoUiqbzXuY5bQ提取码:pvc4欢迎关注微信公众号,分享更多实用工具:…

    2022年9月15日
    0

发表回复

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

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