一、点击加载更多有点像分页获取数据类似，下面是本人写的一个简单的小例子
<!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是关键