帝国CMS二次开发无刷新Ajax加载更多列表信息

微信扫一扫,分享到朋友圈

帝国CMS二次开发无刷新Ajax加载更多列表信息
收藏 00

服务端源码:(保存路径为/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 “” not found /]
); 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="/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,否则不能正常运行!

一个热爱互联网的咸鱼
上一篇

squid+vps搭建代理池的技术方案

下一篇

帝国cms调取作者名称不显示的解决方法

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

热门

    抱歉,30天内未发布文章!
返回顶部