jq ajax 點選按鈕非同步載入更多
阿新 • • 發佈：2019-02-17
挺簡單的非同步載入 程式碼都有備註！
流程挺簡單的：查詢資料庫查出內容，寫分頁，前臺輸出，js非同步請求伺服器，控制器處理返回！ 然後是按分頁請求！每次請求幾頁這樣。具體大夥去研究研究吧！
// info/list.html 頁面程式碼 要載入的內容摘出來新建檔案放進去
<volist name="dynamic" id="v"> <li> <a href="{:U('info/show',array('id'=>$v['id']))}" class="flexdis"> <div class="pic-comwh"> <img src="{:attach($v['img'],article)}"> </div> <div class="cont flexbox"> <p class="title">{$v['title']}</p> <p class="text"> {$v['seo_desc']|syssubstr=150} </p> <time>{$v['time']|date='m-d H:i',###}</time> </div> </a> </li> </volist>
//控制器程式碼
public function index() { if(IS_AJAX){ $map['cate_id'] = 9; $map['status'] = 1; $count = M('article')->where($map)->count('id'); $_GET['p']=$this->_request('p','intval'); //從前臺獲取當前處於第幾頁 $pagesize = 3;//每頁3個 $pager = $this->_pager($count, $pagesize); $dynamic = M('article')->where($map)->limit($pager->firstRow . ',' . $pager->listRows)->order('ordid asc')->select(); $pager = $pager->fshow(); $this->assign(array('pager' => $pager, 'dynamic' => $dynamic, 'count' => $count)); $temp=$this->fetch('info:list');//獲取模板內容（載入的內容） $this->ajaxReturn(1,'',$temp,ceil($count/$pagesize));//返回資料給前端 標識,提示,資料,頁數 } $this->display(); }
//前臺頁面程式碼
<pre name="code" class="html"><include file="public:head"/>{/*網站頂部*/} <body> <include file="index:header"/>{/*網站頭部*/} <div class="banner_info" style="background-image:url(__STATIC__/index/uploads/info01.jpg);"> <img src="__STATIC__/index/uploads/info02.png" class="move-circle"></div> <div class="info_main info_list"> <div class="location">當前位置： <a href="{:U('index/index')}">首頁</a> > <a href="javascript:void(0);">動態</a> </div> <!-- 這個地方是容器,內容在info/list.html--> <ul class="c_b J_ajx" data-p="1" data-max="1"></ul> <a href="javascript:void(0)" class="more">載入更多</a> </div> <!--這裡放js程式碼--> <include file="index:footer"/>{/*網站底部*/} </body> </html>
//js非同步載入程式碼 （重要）
<script type='text/javascript'>
$(function () {
$(".more").eq(0).trigger('click'); //預設先載入1頁 (不寫進入頁面則空白,點選才載入)
})
$(".more").click(function () {
var box=$('.J_ajx'),max=box.attr('data-max'),p=box.attr('data-p'); //容器,總頁數,當前頁
if(p!=1&&(max==1||p>max)){ //頁數超過總頁數阻止執行
$(".more").html('沒有更多');
return false;
}
var ob={
p:p
};
$.ajax({
url: "{:U('info/index')}",
type: 'post',
data: ob,
dataType: 'json',
success: function (data) {
if (data.status == 1) {
box.append(data.data);
box.attr('data-p',parseInt(p)+1);//當前頁+1
box.attr('data-max',data.dialog);
}
}
});
});
</script>