TP5的ajax异步列表加载更多

一、前端（只是模拟，没有把项目中的前端全部搬过来）

<div class="box">
	<ul></ul>
	<div class="tj_more">
		<a href="javascript:;" class="load-more">查看更多</a>
	</div>
</div>

 

二、js代码

<script>
		//列表加载更多
		var page = 1;
		$('.load-more').click(function(){
			var _this = $(this),
			html = '';
			if(_this.text() == '查看更多'){
				_this.html('加载中...');
			}else{
				return false;
			}
            
			//下面的属性
			var categoryIds = '{$cateid}';

			$.ajax({
				type: "post",
				url: "/article/mlist.html",
				data: {page:page, status:1, cateid:categoryIds},
				dataType: "json",
				success: function(date) {
					if(date.status == 1){
						setTimeout(function(){
							_this.parents('.box').children('ul').append(date.data);
							page = page+1;
							if(date.message < 2){
								_this.html('暂无更多');
								_this.css('background', 'none');
								_this.css('color', '#000');
							}else{
								_this.html('查看更多');
							}
							
						}, 500);
					}else{
	
					}
				}
			});
			
		});
</script>

 

三、后端控制器

//手机列表页
        $num = 2;
        if(request()->isAjax()){
            $data['page'] = input('page');
            $cateid = input('cateid');
             //页数
            $articles = model('Article')->mGetypeArticle($cateid,$data['page']*$num,$num);
            
            $count = count($articles);
           
             //循环数据
            $htmls = '';
            foreach ($articles as $key => $value) {
                $html = "<li class='news_top'>
                            <a href='news/".$value['id']."'>
                                <div class='n_t_text'>
                                    <span>".$value['title']."</span>
                                    <span>".$value['short']."</span>
                                </div>
                                <div class='time'>
                                    <span>小编：".$value['author']."</span>
                                    <span>浏览量：".$value['click']."</span>
                                    <span>".date("Y-m-d",$value['create_time'])."</span>
                                </div>
                            </a>
                        </li>";
                $htmls .= $html;
            }
            return show('1',$count,$htmls);
        }else{
            $articles = model('Article')->mGetypeArticle($cateid,0,$num);
        }

四、还有模型中的代码就不贴了，毕竟数据库也看不到，项目中世纪效果是有的，主要就是js跟控制器的返回json数据