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>

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Tabnine Pro 激活码(破解版激活)「建议收藏」

    Tabnine Pro 激活码(破解版激活),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • CSS样式表的引入方式

    CSS样式表的引入方式CSS初识CSS(CascadingStyleSheets)美化样式CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等CSS的优点1.内容与表现分离。2.网页的表现统一,容易修改。3.丰富的样式,使得页面布局更加灵活4.减少网页的代码量,增加网页的浏览速度。5.运用独立于页面

  • 九章算法_九章算法(杭州)科技有限公司

    九章算法_九章算法(杭州)科技有限公司1BST迭代器注意点:1.实际就是中序遍历的非递归写法,迭代器就是要用Stack存储数据,不过把不同的模块功能进行了分割,而不是一次完成中序遍历;2.可以把添加到Stack单独抽取成一个函数

  • 常量字符串过长的解决办法_编译异常和运行异常有哪些

    常量字符串过长的解决办法_编译异常和运行异常有哪些如果使用String str = “这是一个很长很长很长 你需要的字符串。”; 出现异常不能正常编译运行时,可以使用下方:StringBuilder sb = new StringBuilder();sb.append(“这是一个很长很长”);sb.append(“很长 你需要的字符串”);字符串太长或字符串其他情况下可使用 : StringBuilder sb = new StringBuilder()…

  • 放出一套完整的进销存软件源码[通俗易懂]

    放出一套完整的进销存软件源码[通俗易懂]商易进销存2.0vb+sqlserver下载地址:http://60.2.39.130/microerp/源码非常完整,从速下载,过期失效,不接受菜鸟们的技术帮助请求。

  • Docker核心技术学习笔记

    Docker核心技术文章目录Docker核心技术一 、Docker简介二、Docker安装前提说明Docker 的基本组成安装centos 7 安装docker启动hello-world底层原理三、Docker常用命令帮助命令镜像命令容器命令总结四、Docker 镜像**1、镜像是什么?****2、镜像特点****3、Docker镜像commit操作补充**4 、镜像生成的途径5、 镜像导入导出…

发表回复

您的电子邮箱地址不会被公开。

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