本帝国cms插件使用Ajax完成无改写加载更多的列表信息,用检查更多按钮来代替翻页功用,无限加载。
服务端源码:(保存途径为/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='whereclassidin('.$_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=newmysqlquery(); $num=(int)$_POST['next']*$limit; if($table){ $sql=$empire->query("SELECT*FROM`".$dbtbpre."ecms_".$table."`$whereorderby$orderby$myorderlimit$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]; ?> <pclass="latest_news_listfixed"> <pclass="news_cover"> <ahref="<?=$r[titleurl]?>"target=_blank><imgsrc="<?=$r[titlepic]?>"width=160height=100/></a> </p> <pclass="news_text"> <h3><ahref="<?=$r[titleurl]?>"target=_blank><?=$r[title]?></a></h3> <p><?=$smalltext?></p> <p><spanclass="timmerfr"><?=date("Y-m-d",$r[newstime])?></span><ahref="<?=$classurl?>"><?=$classname?></a></p> </p> </p> <?php } } } db_close(); $empire=null; ?>
前端JS脚本完成代码:
$(function(){ vari=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('<imgsrc="/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'); returnfalse; } } }); }); });
ajax恳求服务端参数阐明
next:第几页
table:调用数据表
limit:每次调用数量
small_length:简介截取字符数
length:标题截取字符数
classid:调用栏目,答应多个,如1,2,3,4 特别注意,有必要是调用同一数据表的栏目
orderby:排序,默许是newstime,传什么就按什么来排序,如 id
myorder:正反序,默许是asc,传值怎为desc
除此之外还需求有一个按钮来载入更多
<buttonid="loadmore">点击加载更多内容</button>
还需求一个烘托数据的元素(id="showajaxnews")点击加载更多按钮后获取到的数据会追加到showajaxnews元素里边,在点击载入按钮之前咱们需求预放一下数据在里边,这样的话翻开页面就有部分数据,点击载入按钮后追加到结尾!
<pid="showajaxnews"></p>
参阅模板代码:
本插件是在jQuery下完成,请必须引进jquery,不然不能正常运转!
声明:有的资源均来自网络转载,版权归原作者所有,如有侵犯到您的权益 请联系邮箱:123456@qq.com 我们将配合处理!
原文地址:帝国CMS二次开发无刷新Ajax加载更多列表信息插件发布于2022-06-12 07:43:39