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"/},“即可。

版权保护: 本文由 2018白小姐一肖中特马|香港内部一肖一码|一肖一码期期大公开_三期必出特一肖 原创,转载请保留链接: http://vdfjlpjd.cn/cms/7.html

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

    
    金马堂资料大全 现场开奖网 手机报码室 六合资料大全 六合财神
    六合在线 白小姐中特网 香港中特网 香港马会开奖结果 118图库
    香港马会资料 管家婆彩图 红姐图库 白小姐玄机图 黄大仙
    特码图库 铁算盘开奖 香港中特网 香港六合彩公司 历史开奖记录
    六开彩开奖结果 六盒合彩资料 买马网站 现场直播 特码走势图
    香港正版挂牌 管家婆王中王 王中王特码玄机 六合彩图库 香港6合彩
    天线宝宝六合 香港中特网 深港图库 金多宝现场开奖 香港金多宝
    六合彩特码 九龙官方網 六合彩开奖 神算子中特网 马会资料大全
    香港挂牌 高清跑狗玄机图 新报跑狗图 跑狗玄机图 正版跑狗图
    六合彩公司 博彩通 百家乐 香港总彩特马 黄大仙救世网
    六和彩 铁算盘四肖 红心水论坛 香港内部一肖 白小姐一肖
    东方心经马报 最准一肖中特 一肖一码 四肖中特 香港中特网
    管家婆彩图 168开奖现场 王中王救世网 高清跑狗图 护民图库
    红姐图库 彩霸王综合资料 曾道人 六合开奖结果 六合彩开奖日期
    平特高手 管家婆 六合高手论 平特一肖 彩票之家
    六合手机开奖 六合论坛 手机开奖