Dede利用ajax无限加载文章

06-05 手机六合

 很多用织梦dedecms做图片类的网站都需要用到无限加载这个功能,这个功能需要用到ajax,下面我就告诉大家如何实现这样的功能。

 

首先找到并打开/plus/list.php文件,在里面找到如下代码:

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

 

在其下面添加如下代码:

  1. if(isset($_GET['ajax'])){ 
  2.      $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID 
  3.   $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码 
  4.   $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条,也就是一次加载多少条数据 
  5.   $start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。 
  6.   $typesql = $typeid ? " WHERE typeid=$typeid" : '';//这个是用于首页实现瀑布流加载,因为首页加载数据是无需分类的,所以要加以判断,如果无需 
  7.    $total_sql = "SELECT COUNT(id) as num FROM `tufei_archives`  $typesql "
  8.   $temp = $dsql->GetOne($total_sql); 
  9.   $total = 0;//数据总数 
  10.   $load_num =0
  11.   if(is_array($temp)){ 
  12.     $load_numround(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了 
  13.     $total = $temp['num']; 
  14.   } 
  15.   $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule, 
  16.         t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath 
  17. FROM `tufei_archives` as a JOIN `tufei_arctype` AS t ON a.typeid=t.id    $typesql ORDER BY id DESC LIMIT $start,$pagesize"; 
  18. //echo "$sql"; 
  19.    $dsql->SetQuery($sql); 
  20.     $dsql->Execute('list'); 
  21.    $statu = 0;//是否有数据,默认没有数据 
  22.    $data = array(); 
  23.      $index = 0
  24. while($row = $dsql->GetArray("list")){ 
  25.     $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160); 
  26.      $row['id'] =  $row['id']; 
  27.      $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'], 
  28. $row['typeid'],$row['senddate'],$row['title'],$row['ismake'], 
  29. $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'], 
  30. $row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']); 
  31. $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'], 
  32. $row['isdefault'],$row['defaultname'],$row['ispart'], 
  33.    $row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']); 
  34.   if($row['litpic'] == '-' || $row['litpic'] == ''){ 
  35.       $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif'; 
  36.    } 
  37.     if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){ 
  38.     $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic']; 
  39.    } 
  40.   $row['picname'] = $row['litpic'];//缩略图 
  41.    $row['stime'] = GetDateMK($row['pubdate']); 
  42.   $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链 
  43.   $row['fulltitle'] = $row['title'];//完整的标题 
  44.   $row['shorttitle'] = $row['shorttitle'];//副标题 
  45.   $row['title'] = cn_substr($row['title'], 60);//截取后的标题 
  46.    $data[$index] = $row; 
  47.    $index++; 
  48. if(!empty($data)){ 
  49. $statu = 1;//有数据 
  50. $result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num); 
  51. echo json_encode($result);//返回数据 
  52. exit(); 

 

然后在需要使用无线加载的模板里引用下面这个js代码:

  1. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 

 

并在底部添加如下代码:

  1. <script type="text/javascript"> 
  2. var loadConfig = { 
  3.                 url_api:'/plus/list.php', 
  4.                 typeid:0, 
  5.                 page:2, 
  6.                 pagesize:3, 
  7.                 loading : 0, 
  8.                 } 
  9. function  loadMoreApply(){ 
  10.     if(loadConfig.loading == 0){ 
  11.          var typeid = loadConfig.typeid; 
  12.          var page = loadConfig.page; 
  13.          var pagesize = loadConfig.pagesize; 
  14.          var url = loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize}; 
  15.          var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight; 
  16.          console.log(dHeight); 
  17.          if (sTop + cHeight >= dHeight - cHeight) { 
  18.              loadConfig.loading = 1
  19.             function ajax(url, data) { 
  20.                 $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) { 
  21.                  
  22.                     addContent(data);    
  23.                      
  24.                 }}); 
  25.                  
  26.             } 
  27.             ajax(url,data); 
  28.          
  29.         } 
  30.     } 
  31.  function addContent (rs){ 
  32.     if(rs.statu== 1){ 
  33.         var data = rs.list; 
  34.         var total = rs.total; 
  35.         var arr=[]; 
  36.         var length = data.length; 
  37.         for(var i=0;i<length;i++){ 
  38.             arr.push('<a href="'+data[i].arcurl+'">'); 
  39.             arr.push('<div class="item">'); 
  40.             arr.push('<div class="thumbnail">'); 
  41.             arr.push('<img class="img-responsive" src="'+data[i].picname+'" width=460 height=255 />'); 
  42.             arr.push('</div>'); 
  43.             arr.push('<div class="caption">'); 
  44.             arr.push('<h3>'+data[i].title+'</h3>'); 
  45.             arr.push('<div class="place">'+data[i].shorttitle+'</div>'); 
  46.             arr.push('</div>'); 
  47.             arr.push('</div>'); 
  48.             arr.push('</a>'); 
  49.                      
  50.         } 
  51.         $('.data-list').append(arr.join('')); 
  52.      
  53.         loadConfig.load_num = rs.load_num; 
  54.      
  55.         if(total<loadConfig.page*loadConfig.pagesize || loadConfig.page > loadConfig.load_num){ 
  56.             window.removeEventListener('srcoll',loadMoreApply,false); 
  57.         } 
  58.         loadConfig.page++; 
  59.         loadConfig.loading = 0
  60.     } 
  61. function pullLoad(){ 
  62.     window.addEventListener('scroll', loadMoreApply, false); 
  63. pullLoad() 
  64. checkMobile(); 
  65.  
  66. </script> 

 

上面的代码中的”$('.data-list').append(arr.join(''));“里的”data-list“对应模板内列表的外框class属性。

arr.push部分对应的是列表代码,

这样就可以使用无线加载了。

如果在列表页只需把代码中的”typeid:0,“ 修改为”typeid:{dede:field name="typeid"/},“即可。

版权保护: 本文由 开奖网|香港最快开奖现场直播|手机六合现场开奖|香港六合最快开奖网|手机最快报码室 原创,转载请保留链接: http://htftnhbv.cn/cms/7.html

博客主人YeLongCu
男,文化程度不高性格有点犯二,已经20来岁至今未婚,闲着没事喜欢研究各种代码,资深技术宅。
  • 文章总数
  • 1331访问次数
  • 建站天数
  • 标签

    
    金马堂资料大全 现场开奖网 手机报码室 六合资料大全 六合财神
    六合在线 白小姐中特网 香港中特网 香港马会开奖结果 118图库
    香港马会资料 管家婆彩图 红姐图库 白小姐玄机图 黄大仙
    特码图库 铁算盘开奖 香港中特网 香港六合彩公司 历史开奖记录
    六开彩开奖结果 六盒合彩资料 买马网站 现场直播 特码走势图
    香港正版挂牌 管家婆王中王 王中王特码玄机 六合彩图库 香港6合彩
    天线宝宝六合 香港中特网 深港图库 金多宝现场开奖 香港金多宝
    六合彩特码 九龙官方網 六合彩开奖 神算子中特网 马会资料大全
    香港挂牌 高清跑狗玄机图 新报跑狗图 跑狗玄机图 正版跑狗图
    六合彩公司 博彩通 百家乐 香港总彩特马 黄大仙救世网
    六和彩 铁算盘四肖 红心水论坛 香港内部一肖 白小姐一肖
    东方心经马报 最准一肖中特 一肖一码 四肖中特 香港中特网
    管家婆彩图 168开奖现场 王中王救世网 高清跑狗图 护民图库
    红姐图库 彩霸王综合资料 曾道人 六合开奖结果 六合彩开奖日期
    平特高手 管家婆 六合高手论 平特一肖 彩票之家
    六合手机开奖 六合论坛 手机开奖 老香港六合 六合论坛
    香港马会 马会开奖结果 香港最快开奖 开奖现场直播 118kj开奖现场
    香港马会资料 香港九龙 九龙官方網 惠泽社群 香港六合采
    六合彩公司 历史开奖记录 六合彩论坛 六合彩资料 六合彩特码
    特码玄机 资料大全 六合免费中特 香港正版挂牌 资料大全2018年
    马会资料 六合彩公益 黄大仙综合资料 白小姐中特网 平特一肖
    平特高手 118论坛 百家乐投注站 特码走势图 一码公式规律
    开奖记录 百家乐图库 博彩网址大全 77498开奖现场 香港现场直播
    987开奖网 一码资料 内幕资料 六合彩特码 单双大小
    开奖历史 六合彩公式 免费内幕资料 6合开奖 六合彩开奖结果
    六合彩买什么 六合宝典 赛马会资料 六合开奖 九五心水论坛
    香港马会开将 天下彩免费资料 香港开奖结果 正版挂牌彩图 香港挂牌
    铁算盘开奖 铁算盘一句解特 一肖中特马 白小姐中特网 白小姐中特玄机
    白小姐资料 手机看开奖 正版挂牌彩图 免费公开资料 小鱼儿玄机2站
    一码中特 管家婆图 六合世界 迪士尼高手论坛 六合彩图库
    特码走势图 开奖直播 六合彩图纸 手机看开奖 六合彩图库
    开奖现场 开奖记录 开奖日期 港台六合开奖 六合彩资料
    香港赛马会 六合开奖结果 香港中特网 开奖现场直播 香港最快开奖
    香港开奖结果 管家婆中特网 管家婆彩图 白小姐一肖中特 白小姐中特网
    一肖一码 香港最准一肖