一個基于jquery庫的點擊加載更多實現（可在一個頁面實現多個）
1.引入jquery庫，文件包中有
2.頁面中的js函數
<script type="text/javascript">
var page = [1,1,1,1,1,1,1];//定義每個點擊加載按鈕的初始頁碼
function showImr(v_clmid,v_id,v_begin,v_number,v_iwords,v_iitwords){
//參數依次表示：要獲取后臺文章的id；在頁面中點擊按鈕的id（與前面的page數組的下標對應）；獲取文章開始的條數；每次獲取的條數；標題字符寬度；摘要字符寬度。
var url = '/getImr.action';
var params = {
clmid:v_clmid,
begin:v_begin,
page:page[v_id],
number:v_number,
iwords:v_iwords,
iitwords:v_iitwords
};
$('#loaddiv'+v_id).show();
$('#loader'+v_id).hide();
jQuery.post(url, params,function(data){
$('#cntnr'+v_id).append(data);
$('#loaddiv'+v_id).hide();
$('#loader'+v_id).show();
page[v_id]+=1;
});
}
</script>
3.按鈕的點擊實現：
css：
.clickaction {
background-color: #EFEFEF;
color: #BBB;
display: block;
height: 34px;
line-height: 34px;
text-decoration: none;
font-size: 12px;
border-radius: 3px;
text-align: center;
clear: both;
cursor:pointer;
}
.loaddiv{
width:40px;
height:40px;
background: url(/images/load.gif) center no-repeat;
display:none;
}
第一個點擊加載更多按鈕：
<ul id="cntnr0"> //這個地方的id后面的數字表示第幾個按鈕，第一個從0開始
<li>……</li>
<li>……</li>
</ul>
<div id="loaddiv0" class="loaddiv"></div>
<div id="loader0" class="clickaction" onclick="showImr('28',0,6,5,51,80);">點擊加載更多</div>
第二個點擊加載更多按鈕：
<ul id="cntnr1"> //這個地方的id后面的數字表示第幾個按鈕，第一個從0開始
<li>……</li>
<li>……</li>
</ul>
<div id="loaddiv1" class="loaddiv"></div>
<div id="loader1" class="clickaction" onclick="showImr('28',1,6,5,51,80);">點擊加載更多</div>
第三個，第四個依次類推，修改id="cntnr1"，id="loaddiv1"，id="loader1"，onclick="showImr('28',1 中的1為2即可。
4.java端的實現：
/getImr.action端實現輸出li對即可。
pageBegin的計算方式：begin+(page-1)*number
pageEnd的計算方式：begin+page*number-1
sql中按照大于等于pageBegin，小于等于pageEnd的方式計算。
5.實現之后的效果圖
如圖，點擊后會出現load的圖片，內容加載完畢后load圖片自動取消。