本帝國(guó)cms插件利用Ajax實(shí)現(xiàn)無(wú)刷新加載更多的列表信息，用查看更多按鈕來(lái)替代翻頁(yè)功能，無(wú)限加載。

服務(wù)端源碼：（保存路徑為/e/action/get_news_index.php）

<?php
require('../class/connect.php');
require('../class/db_sql.php');
require('../data/dbcache/class.php');
if($_POST[action] == 'getmorenews'){
$table=htmlspecialchars($_POST[table]);
if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
if(empty($_POST[limit])){$limit=15;}else{ $limit=(int)$_POST[limit];}
if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
if(empty($_POST[small_length])){$small_length=500;}else{ $small_length=(int)$_POST[small_length];}
$link=db_connect();
$empire=new mysqlquery();
$num =(int)$_POST['next'] *$limit;
if($table){
$sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
while($r=$empire->fetch($sql)){
if($r[titlepic]==''){
$r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";
}
$oldtitle=stripSlashes($r[title]);
$title=sub($oldtitle,'',$length);
$smalltext=stripSlashes($r[smalltext]);
$smalltext=sub($smalltext,'',$small_length);
$classname=$class_r[$r[classid]][classname];
$newsurl=$public_r[newsurl];
$classurl=$newsurl.$class_r[$r[classid]][classpath];
?>
<p class="latest_news_list fixed">
<p class="news_cover">
<a href="<?=$r[titleurl]?>" target=_blank><img src="<?=$r[titlepic]?>" width=160 height=100 /></a>
</p>
<p class="news_text">
<h3><a href="<?=$r[titleurl]?>" target=_blank><?=$r[title]?></a></h3>
<p><?=$smalltext?></p>
<p><span class="timmer fr"><?=date("Y-m-d",$r[newstime])?></span><a href="<?=$classurl?>"><?=$classname?></a></p>
</p>
</p>
<?php
}
}
}
db_close();
$empire=null;
?>

前端JS腳本實(shí)現(xiàn)代碼：

$(function(){
var i = 1; //設(shè)置當(dāng)前頁(yè)數(shù)
$('#loadmore').on('click',function(){
$.ajax({
url : '/e/action/get_news_index.php',
type:'POST',
data:{"next":i,'table':'news','action':'getmorenews','limit':15,'small_length':120},
dataType : 'html',
beforeSend:function(){
$("#loadmore").show().html('<img src="/e/extend/Ajaxpl/template/loading1.gif" width=80/>正在努力加載中...');
$('#loadmore').attr('disabled','disabled');
},
success : function(data){
if(data){
$("#showajaxnews").append(data);
$("#loadmore").removeAttr('disabled');
$("#loadmore").html('點(diǎn)擊加載更多');
i++;
}else{
$("#loadmore").show().html("已全部加載完畢！");
$('#loadmore').attr('disabled','disabled');
return false;
}
}
});
});
});

ajax請(qǐng)求服務(wù)端參數(shù)說(shuō)明

next：第幾頁(yè)

table：調(diào)用數(shù)據(jù)表

limit：每次調(diào)用數(shù)量

small_length：簡(jiǎn)介截取字符數(shù)

length：標(biāo)題截取字符數(shù)

classid：調(diào)用欄目，允許多個(gè)，如1,2,3,4  特別注意，必須是調(diào)用同一數(shù)據(jù)表的欄目

orderby：排序，默認(rèn)是newstime，傳什么就按什么來(lái)排序，如 id

myorder：正反序，默認(rèn)是asc，傳值怎為desc

除此之外還需要有一個(gè)按鈕來(lái)載入更多

<button id="loadmore">點(diǎn)擊加載更多內(nèi)容</button>

還需要一個(gè)渲染數(shù)據(jù)的元素(id="showajaxnews")點(diǎn)擊加載更多按鈕后獲取到的數(shù)據(jù)會(huì)追加到showajaxnews元素里面，在點(diǎn)擊載入按鈕之前我們需要預(yù)放一下數(shù)據(jù)在里面，這樣的話(huà)打開(kāi)頁(yè)面就有部分?jǐn)?shù)據(jù)，點(diǎn)擊載入按鈕后追加到末尾！

<p id="showajaxnews" ></p>

參考模板代碼：

本插件是在jQuery下實(shí)現(xiàn)，請(qǐng)務(wù)必引入jquery，否則不能正常運(yùn)行！