织梦DedeCMS模板织梦DedeCMS首页列表页AJAX无限加载瀑布流修正版

最近在学javascript，才慢慢开始读懂JS代码。对HTML前台AJAX加载技术研究了一番，像博客站或者图片站运用AJAX异步无限加载，做成瀑布流，提高用户体验，这是AJAX异步加载的优点。

AJAX异步加载的弊端：属于WEB前端技术，蜘蛛不会抓JS调用的内容，也就是并不利于SEO优化。所以要运用这个功能的话最好有一部分直接调用，另一部分采用AJAX异步加载。

接下来用织梦来做AJAX异步加载WEB前端开发。网上有诸多教程，经过笔者整理，给出详细说明，修正后分享给大伙。

打开/plus/list.php，找到

require_once(dirname(__FILE__).”/../include/common.inc.php”);

下面增加代码

if(isset($_GET[ajax])){$typeid = isset($_GET[ ypeid]) ? intval($_GET[ ypeid]): 0;//传递过来的分类ID$page = isset($_GET[page]) ? intval($_GET[page]): 0;//页码$pagesize = isset($_GET[pagesize]) ? intval($_GET[pagesize]): 15;//每页多少条，也就是一次加载多少条数据$start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。$typesql = $typeid ? " WHERE typeid=$typeid" : \;//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需$total_sql = "SELECT COUNT(id) as num FROM `dede_archives` $typesql ";$temp = $dsql->GetOne($total_sql);$total = 0;//数据总数$load_num =0;if(is_array($temp)){$load_num= round(($temp[ um]-15)/$pagesize);//要加载的次数,因为默认已经加载了$total = $temp[ um];}$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepathFROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";//echo "$sql";$dsql->SetQuery($sql);$dsql->Execute(list);$statu = 0;//是否有数据，默认没有数据$data = array();$index = 0;while($row = $dsql->GetArray("list")){$row[info] = $row[info] = $row[infos] = cn_substr($row[description],160);$row[id] = $row[id];$row[filename] = $row[arcurl] = GetFileUrl($row[id],$row[ ypeid],$row[senddate],$row[ itle],$row[ismake],$row[arcrank],$row[ amerule],$row[ ypedir],$row[money],$row[filename],$row[moresite],$row[siteurl],$row[sitepath]);$row[ ypeurl] = GetTypeUrl($row[ ypeid],$row[ ypedir],$row[isdefault],$row[defaultname],$row[ispart],$row[ amerule2],$row[moresite],$row[siteurl],$row[sitepath]);if($row[litpic] == - || $row[litpic] == \){$row[litpic] = $GLOBALS[cfg_cmspath]./images/defaultpic.jpg;}if(!preg_match("#^http://#i", $row[litpic]) &&$GLOBALS[cfg_multi_site] == Y){$row[litpic] = $GLOBALS[cfg_mainsite].$row[litpic];}$row[picname] = $row[litpic];//缩略图$row[stime] = GetDateMK($row[pubdate]);$row[ ypelink] = "/a/dedejq/".$row[ ypename]."";//分类链$row[fulltitle] = $row[ itle];//完整的标题$row[shorttitle] = $row[shorttitle];//副标题$row[ itle] = cn_substr($row[ itle], 60);//截取后的标题$data[$index] = $row;$index++;}if(!empty($data)){$statu = 1;//有数据}$result =array(statu=>$statu,list=>$data, otal=>$total,load_num=>$load_num);echo json_encode($result);//返回数据exit();}

模板文件增加内容

在需要用AJAX异步加载的模板的前增加代码

var loadConfig = {url_api:{dede:global.cfg_cmspath/}/plus/list.php, //修正plus目录typeid:{dede:field name= ypeid/}, //首页此处是typeid:0,page:2,pagesize:3,loading : 0,}function loadMoreApply(){if(loadConfig.loading == 0){var typeid = loadConfig.typeid;var page = loadConfig.page;var pagesize = loadConfig.pagesize;var url = loadConfig.url_api,data={ajax:pullload,typeid:typeid,page:page,pagesize:pagesize};var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight;console.log(dHeight);if (sTop + cHeight >= dHeight - cHeight) {loadConfig.loading = 1;function ajax(url, data) {$.ajax({url: url,data: data,async: false,type: GET,dataType: json,success: function(data) {addContent(data);}});}ajax(url,data);}}}function addContent (rs){if(rs.statu== 1){var data = rs.list;var total = rs.total;var arr=[];var length = data.length;for(var i=0;i<length;i++){arr.push(

);arr.push(\);arr.push(\);arr.push(\);arr.push([+data[i].typelink+]);arr.push(\+data[i].title+\);arr.push(\);}$(.data-list).append(arr.join(\));loadConfig.load_num = rs.load_num;if(total loadConfig.load_num){window.removeEventListener(srcoll,loadMoreApply,false);}loadConfig.page++;loadConfig.loading = 0;}}function pullLoad(){window.addEventListener(scroll, loadMoreApply, false);}pullLoad();

首页HTML代码示例

注意：首页模板用arclist标签，用row=’3’是初始化调用的3条；列表模板用list标签，用pagesize=’3’。模板里面的

{dede:arclist row=’3′} [field:array runphp=’yes’]@me = (empty(@me[‘litpic’]) ? “” : ““); [/field:array][[field:typelink/]] [field:title/]日期：[field:pubdate function=”GetDateTimeMK(@me)”/]点击：[field:click/]好评：[field:scores/]

[field:description/]…

{/dede:arclist}