当前位置:主页 > 手机赚钱 > 正文

Dede利用ajax无限加载文章

2016-06-05 18:55:46 手机赚钱 admin

本文有1721个文字,大小约为6KB,预计阅读时间5分钟

 很多用织梦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"/},“即可。

更多相关推荐

正规股票配资交易所推荐:上海证券交易所 深圳证券交易所 香港证券交易所

小编提醒:请远离场外配资,谨防上当受骗。选择正规理财途径确保资金安全,避免吃亏上当!

特此申明: 本文由 admin编辑,本文标题: Dede利用ajax无限加载文章 本文链接: /sjzq/7.html

配资平台负责人小风
男,专业从事金融服务行业10年,股票配资领域顶级玩家。欢迎热爱股票配资的朋友一起来交流!!
  • 文章总数
  • 1398访问次数
  • 建站天数
  • 十大正规配资平台

    名称 是否实盘 网址
    荣耀配资 访问
    京海策略 访问
    简配资 访问
    久联优配 访问
    杨方配资 待验证 访问
    鸿牛配资 待验证 访问
    申捷策略 待验证 访问
    涵星配资 待验证 访问
    简配资 待验证 访问
    金桥大通 待验证 访问

    上证指数大盘实时行情

    十大口碑配资软件APP推荐

    APP名称 口碑 下载地址
    小熊猫配资APP 5颗星 下载
    杨方配资APP 5颗星 下载
    简配资APP 5颗星 下载
    久联优配APP 5颗星 下载
    爱配资APP 5颗星 下载
    亿海配资APP 5颗星 下载
    好配资APP 5颗星 下载
    明道配资APP 5颗星 下载
    环球配资APP 5颗星 下载
    赛岳配资APP 5颗星 下载

    热门标签