doyocms利用ajax实现无刷新加载文章数据

使用doyocms的朋友都知道，cms本身是不带ajax请求数据的函数的，所以想要利用ajax无刷新请求数据，我们需要自己写函数，并且配合js达到瀑布流效果。下面就和大家分享一下点击加载和滚动到底不自动加载的两种无刷新请求数据的方法。

1、我们需要在/souce/article.php。添加一下代码函数

function ajaxmore(){
	$page=$this->syArgs('page',1);	
	$tid=$this->syArgs('tid',1);
	$w.=" where isshow=1 ";
	$w.="and tid=".$tid;
	$order=' order by orders desc,addtime desc,id desc';
	$f=syDB('fields')->findAll(" molds='article' and types like '%|".$tid."|%' and lists=1 ");
	if($f){
		foreach($f as $v){$fields.=','.$v['fields'];}
		$sql='select id,tid,title,style,trait,gourl,addtime,hits,litpic,orders,mrank,mgold,isshow,description,htmlurl,htmlfile,user'.$fields.',b.body from '.$this->db.' a left join '.$this->db.'_field b on (a.id=b.aid)'.$w.$order;
	}else{	
		$sql='select id,tid,title,style,trait,gourl,addtime,hits,litpic,orders,mrank,mgold,isshow,description,htmlurl,htmlfile,user from '.$this->db.$w.$order;
   }
   $total_page=total_page($this->db.$w);
   $this->lists = $this->Class->syPager($this->syArgs('page',0,1),12,$total_page)->findSql($sql);
   $this->countt=count($this->lists); 
   $this->display('article/ajaxmore.html');
		
	}

2、在article模板下添加ajaxmore.html调用列表模板

 {if($lists)}
{foreach $lists as $v}
<li class="item">
<a href="/index.php?c=article&id={$v['id']}">
    <time><em>{fun date('d',$v['addtime'])} </em><span>{fun date('Y-m',$v['addtime'])} </span></time>
    <h5>{fun newstr($v['title'],30)} </h5>
    <p> {fun newstr($v['description'],220)} </p>
</a>
</li>
{/foreach}
{else}
{$countt}
{/if}

3、在list.html模板中利用js调用

    <script type="text/javascript">
	 $(document).ready(function (){
		 ajaxmore();    
     });
			page = 1;//页数
			ccc = 0;
			function ajaxmore() {
			   //$(".container").mLoading();
			    var tid=$("#tid").html();
				$.ajax({
					type: "get",
					url: "/index.php?c=article&a=ajaxmore",
					data:{"page":page,"tid":tid},
					dataType: 'html',
					success: function (data) {
						console.log(data);
						if (data!=0) {
							//$(".mloading").css('display','none');
							$(".result").append(data);
							page++;
						} else {
						//	alert("没有更多数据了");
							$(".result").append("<p class='more'>没有更多数据了<p>");
							$(".moree").remove();
							ccc=1;
						}
					}
				});
			}
	
			//滚动条到页面底部加载更多案例   
			$(window).scroll(function(){  
			 var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度  
			 var scrollHeight = $(document).height();   //当前页面的总高度  
			 var clientHeight = $(this).height();    //当前可视的页面高度  
			 // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);  
			 if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部   
				 //滚动条到达底部   
				 if(ccc=='0'){
					//alert(222);
					ajaxmore();
				 }
			  }
			});  
 

	</script>

具体代码请下载附件，自行测试！