网站地图
  • 网站首页
  • 网站模板
  • 建站资源
  • 站长百科
  • 天下素材
  • 软件源码
  • 源码教程
  • DEDECMS模板DEDE首页列表页AJAX无限加载瀑布流修正版

    发布时间: 2021-10-02 00:30首页:ok模板网 > 网站模板 > DEDE模板 > 阅读()
    -->近期在学javascript,才慢慢开始了解JS代码。对HTML前台AJAX加载技术研究了一番,像博客站或者图片站运用AJAX异步无限加载,做成瀑布流,提升客户体验,这是AJAX异步加载的优点。
    AJAX异步加载的弊病:是WEB前端技术,蜘蛛不会抓JS调用的内容,也就是并不利于SEO优化。所以要运用这个功能的话最好有一部分直接调用,另一部分使用AJAX异步加载。
    下面用DEDE来做AJAX异步加载WEB前端开发。网上有很多课程,经过笔者整理,给出详细说明,修正后推荐给大伙。
    打开/plus/list.php,找到
    require_once."/../include/common.inc.php");
    下面增加代码
    if){$typeid = isset ? intval: 0;//传递过来的分类ID$page = isset ? intval: 0;//页码$pagesize = isset ? intval: 15;//每页多少条,也就是一次加载多少条数据$start = $page>0 ? *$pagesize : 0;//数据获得的起始地方。即limit条件的第一个参数。$typesql = $typeid ? " WHERE typeid=$typeid" : '';//这个是用于首页达成瀑布流加载,由于首页加载数据是不需要分类的,所以要加以判断,假如不需要$total_sql = "SELECT COUNT as num FROM `dede_archives`$typesql ";$temp = $dsql->GetOne;$total = 0;//数据总数$load_num =0;if){$load_num= round/$pagesize);//要加载的次数,由于默认已经加载了$total = $temp['num'];}$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;$dsql->Execute;$statu = 0;//是不是有数据,默认没数据$data = array;$index = 0;while){$row['info'] = $row['info'] = $row['infos'] = cn_substr;$row['id'] =$row['id'];$row['filename'] = $row['arcurl'] = GetFileUrl;$row['typeurl'] = GetTypeUrl;if{$row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';}if &&$GLOBALS['cfg_multi_site'] == 'Y'){$row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];}$row['picname'] = $row['litpic'];//缩略图$row['stime'] = GetDateMK;$row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链$row['fulltitle'] = $row['title'];//完整的标题$row['shorttitle'] = $row['shorttitle'];//副标题$row['title'] = cn_substr;//截取后的标题$data[$index] = $row;$index++;}if){$statu = 1;//有数据}$result =array;echo json_enp;//返回数据exit;}

    模板文件增加内容
    在需要用AJAX异步加载的模板的</head>前增加代码
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">var loadConfig = {url_api:'{dede:global.cfg_cmspath/}/plus/list.php', //修正plus目录typeid:{dede:field name='typeid'/}, //首页此处是typeid:0,page:2,pagesize:3,loading : 0,}functionloadMoreApply{if{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 = $.height, cHeight = document.documentElement.clientHeight;console.log;if  {loadConfig.loading = 1;function ajax {$.ajax {addContent;}});}ajax;}}}function addContent {if{var data = rs.list;var total = rs.total;var arr=[];var length = data.length;for{arr.push;arr.push;arr.push;arr.push;arr.push;arr.push;arr.push;}$.append);loadConfig.load_num = rs.load_num;if{window.removeEventListener;}loadConfig.page++;loadConfig.loading = 0;}}function pullLoad{window.addEventListener;}pullLoad;</script>

    首页HTML代码示例
    注意:首页模板用arclist标签,用row='3'是初始化调用的3条;列表模板用list标签,用pagesize='3'。模板里面的<div class="data-list“>与js里面的data-list对应,需要把循环部分全部包裹起来
    查询网站源码打印代码帮
    <div class="listbox"><ul class="e2"><div class="data-list">{dede:arclist row='3'}<li> [field:array runphp='yes']@me =  ? "" : "<a href='{@me['arcurl']}' class='preview'><img src='{@me['litpic']}'/></a>"); [/field:array][<b>[field:typelink/]</b>] <a href="[field:arcurl/]" class="title">[field:title/]</a> <span class="info"> <small>日期:</small>[field:pubdate function="GetDateTimeMK"/] <small>点击:</small>[field:click/] <small>好评:</small>[field:scores/] </span><p class="intro"> [field:description/]... </p></li>{/dede:arclist}</div><!--data-list--></ul></div><!-- /listbox -->

    特别声明:文章内容仅供参考,不造成任何投资建议。投资者据此操作,风险自担。

    网站首页 - 网站模板 - 建站资源 - 站长百科 - 天下素材 - 软件源码 - 源码教程

    未经本站书面特别授权,请勿转载或建立镜像

    Copyright © 2002-2021 ok模板网 (http://www.836372.com) 网站地图 TAG标签