一、點擊加載更多有點像分頁獲取數據類似，下面是本人寫的一個簡單的小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <meta name="viewport" content="initial-scale=1.0,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="~/Content/Phone/css/list_css.css" rel="stylesheet" /> <title>新聞列表</title> </head> <body> <div id="list-new"> </div> <!--加載更多按鈕--> <div class="js-load-more">加載更多</div> <script src="~/Content/Phone/js/zepto.min.js"></script> <script> $(function(){ /*初始化*/ var counter = 0; /*計數器*/ var pageStart = 1; /*offset*/ var pageSize = 4; /*size*/ /*首次加載*/ getData(pageStart, pageSize); /*監聽加載更多*/ $(document).on('click', '.js-load-more', function () { pageStart++ getData(pageStart, pageSize); }); function getData(offset,size){ $.ajax({ type: 'GET', url: '/PhoneManage/Notice/listJson?pageSize=' + size + '&pageIndex=' + offset, //這里offset,size無作用，僅方便調試 dataType: 'json', success: function(reponse){ var data = reponse; var sum = reponse.length; var result = ''; /************業務邏輯塊：實現拼接html內容並append到頁面*****************/ //console.log(offset , size, sum); for (var i = (offset -1) * size; i < sum; i++) { result += '<a href="/PhoneManage/Notice/text?id=' + data[i].F_Id + '"><div class="list"><div class="text"><h3>' + data[i].F_Title + '</h3><p>' + data[i].F_CreatorTime + '</p></div><div class="back"><img src="/Content/Phone/images/back1.png" width="32" /></div></div></a>'; } $('#list-new').append(result); /*******************************************/ /*隱藏more*/ if ((offset * size) > sum) { $(".js-load-more").hide(); }else{ $(".js-load-more").show(); } }, error: function(xhr, type){ alert('Ajax error!'); } }); } }); </script> </body> </html>
二、點擊加載更多，需要注意是在原來數據的基礎上加載出來新的數據，所以拼接html是關鍵