jquery ajax请求 加载更多
js代码+html代码
$(function () { /*初始化*/ var counter = 0; /*计数器*/ var pageSize = 4; /*size*/ var page = counter + 1; /*首次加载*/ getData(page); /*监听加载更多*/ $(document).on('click', '.js-load-more', function () { counter++; pageStart = counter * pageSize; page = counter + 1; getData(page); }); function getData(page) { console.log('第一次进入'); $.ajax({ type: 'GET', url: 'http://wx.swkjfw.com/app/index.php?i=35&c=entry&do=commission&m=dg_articlemanage&op=ajax' + '&page=' + page, dataType: 'json', success: function (response) { var data = response.list; //响应的数据 var length = response.list.length; var result = ''; for (var i = 0; i < length; i++) { if (response.list[i].status == 0) { result += "<tr><td> " + response.list[i].withdraw_money + "¥</td><td>" + response.list[i].withdraw_time + "</td><td><div class='withdraw_in'>审核中</div></td></tr>"; } else if (response.list[i].status == 1) { result += "<tr><td> " + response.list[i].withdraw_money + "¥</td><td>" + response.list[i].withdraw_time + "</td><td><div class='withdraw_success'>成功</div></td></tr>"; } else if(response.list[i].status == 2) { result += "<tr><td> " + response.list[i].withdraw_money + "¥</td><td>" + response.list[i].withdraw_time + "</td><td><div class='withdraw_fail'>失败</div></td></tr>"; } } console.log(result); if (response.is_bottom) { $(".js-load-more").hide(); $(".js-bottom").show(); } else { $(".js-load-more").show(); $(".js-bottom").hide(); } /************业务逻辑块:实现拼接html内容并append到页面*****************/ /*如果剩下的记录数不够分页,就让分页数取剩下的记录数 * 例如分页数是5,只剩2条,则只取2条 * * 实际MySQL查询时不写这个不会有问题 */ /*使用for循环模拟SQL里的limit(offset,size)*/ $('.withdraw_container').find('tbody').append(result); /*******************************************/ /*/!*隐藏more*!/ if ( (offset + size) >= sum){ }else{ $(".js-load-more").show(); }*/ }, error: function (xhr, type) { alert('Ajax error!'); } }); } }); </script> <div class="withdraw_container"> <table> <thead> <tr> <th>提现金额</th> <th>提现申请时间</th> <th>提现状态</th> </tr> </thead> <tbody> </tbody> </table> </div> <!--加载更多按钮--> <div class="js-load-more">加载更多提现记录</div> <div class="js-bottom">已到底部</div> |
php请求地址
if($_GPC['op']="ajax"){ if($_GPC['page']){ $isBottom=false; $pindex = max(1, intval($_GPC['page'])); $psize = 3; $withdrawededList=pdo_fetchall("SELECT * FROM ".tablename('dg_article_commission_withdraw_log')." WHERE uniacid=:uniacid AND openid=:openid ORDER BY `id` DESC LIMIT ".($pindex - 1) * $psize.",{$psize}",array(":uniacid" => $uniacid, ":openid" => $openid)); $nextPage=pdo_fetchall("SELECT * FROM ".tablename('dg_article_commission_withdraw_log')." WHERE uniacid=:uniacid AND openid=:openid ORDER BY `id` DESC LIMIT ".$pindex * $psize.",1",array(":uniacid" => $uniacid, ":openid" => $openid)); if(empty($nextPage)){ $isBottom=true; } foreach ($withdrawededList as &$list){ $list['withdraw_time']=date('y-m-d H:i',$list['withdraw_time']); } echo json_encode(array('list'=>$withdrawededList,'is_bottom'=>$isBottom)); exit; } } |