首頁 > 運營 > 建站經驗 > 正文

帝國cms無刷新Ajax加載更多列表信息插件

2018-10-16 00:12:57
字體:
來源:轉載
供稿:網友
帝國CMS插件利用Ajax實現無刷新加載更多的列表信息,用查看更多按鈕來替代翻頁功能,無限加載。

服務端源碼:(保存路徑為/e/action/get_news_index.php)

<?phprequire('../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];?><div class="latest_news_list fixed"><div class="news_cover"><a href="<?=$r[titleurl]?>" target=_blank><img src="<?=$r[titlepic]?>" width=160 height=100 /></a></div><div 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></div></div><?php}}}db_close();$empire=null;?>

前端JS腳本實現代碼:

$(function(){var i = 1; //設置當前頁數$('#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=http://www.11px.cn/jiaocheng/ecms/2016-11-03/"/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('點擊加載更多');i++;}else{$("#loadmore").show().html("已全部加載完畢!");$('#loadmore').attr('disabled','disabled');return false;}}});});});


ajax請求服務端參數說明

next:第幾頁

table:調用數據表

limit:每次調用數量

small_length:簡介截取字符數

length:標題截取字符數

classid:調用欄目,允許多個,如1,2,3,4  特別注意,必須是調用同一數據表的欄目

orderby:排序,默認是newstime,傳什么就按什么來排序,如 id

myorder:正反序,默認是asc,傳值怎為desc

除此之外還需要有一個按鈕來載入更多

<button id="loadmore">點擊加載更多內容</button>

還需要一個渲染數據的元素(id="showajaxnews")點擊加載更多按鈕后獲取到的數據會追加到showajaxnews元素里面,在點擊載入按鈕之前我們需要預放一下數據在里面,這樣的話打開頁面就有部分數據,點擊載入按鈕后追加到末尾!

<div id="showajaxnews" ></div>

參考模板代碼:

本插件是在jQuery下實現,請務必引入jquery,否則不能正常運行!


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
金玫玫床戏