thinkphp3.2.3的ajax加载更多

效果：点击加载更多，根据设定的加载条数显示加载内容，全部加载完毕后加载更多按钮消失。话不多说，直接上代码。

html代码：（这个样式可以根据需求自定义）

<div id="news">
    <div class="wrap">
        <div class="l-wrap" id="list">
            <notempty name="list">
                <volist name="list" id="vo">
                    <div class="item">
                        <div class="pic">
                            <a href="__MODULE__/NewsInfos/index/id/{$vo.id}">
                                <p class="bg">
                                    ![](__PUBLIC__/images/news-btn.png)
                                </p>
                                <if condition="$vo['pic'] neq ''">
                                ![](__ROOT__{$vo.pic})
                                <else />
                                暂无图片
                                </if>
                            </a>
                        </div>
                        <div class="texts">
                            <a href="__MODULE__/NewsInfos/index/id/{$vo.id}">
                                <h3>{$vo.title}</h3>
                            </a>
                            <p class="p1"><span>{$vo.fabu_time}</span>  作者：<span>miss麦</span></p>
                            <p class="p2" id="content">
                                {$vo.content}
                            </p>
                        </div>
                    </div>
                </volist>
            </notempty>
        </div>
    </div>
</div>
<!-- 加载更多 -->
<div class="more"></div>

js代码：

var page = 0;
$('.more').click(function() {
    var n = $("#news .item").length;//当前item个数
    // alert(n);
    page += 3;//点击一次追加3条
    $.ajax({
        url:'{:U("News/more")}',
        cache: false,
        async: false,
        data:{p:page,n:n},
        dataType: "json",
        type:"post",
        success:function(datas){
            var more_show = datas[0];
            var data = datas[1];
            var html='';
            if (more_show == 1) {
                $(".more").show();
            }else{
                $(".more").hide();
            } 
            for (var i in data) { //循环遍历
                html +='<div class=\"item\">';
                html +='<div class=\"pic\">';
                html +='<a href=\"__MODULE__/NewsInfos/index/id/'+data[i].id+'\"> ';
                html +='<p class="bg">';
                html +='<img src=\"__PUBLIC__/images/news-btn.png\" />';
                html +='</p>';
                html +='<img src=\"__ROOT__'+data[i].pic+'\"> ';
                html +='</a>';
                html +='</div>';
                html +='<div class=\"texts\">';
                html +='<a href=\"__MODULE__/NewsInfos/index/id/'+data[i].id+'\"> ';
                html +='<h3>'+data[i].title+'</h3>';
                html +='</a>';
                html +='<p class=\"p1\"><span>'+data[i].fabu_time+'</span>  作者：<span>miss涂麦</span></p>';
                html +='<p class=\"p2\" id="content\">';
                html +=data[i].content;
                html +='</p>';
                html +='</div>';
                html +='</div>';
            }
            $('#list').append(html);//追加
        }
    }); 
});

PHP代码：

public function more(){
    $news = M('news');
    $count =$news->count();
    if(!empty($_POST['p'])){  //点击加载更多 
        $p = $_POST['p'];//3 6 9
        $n = $_POST['n'];
        if (($p+$n)>=$count) {
            $flag =0;
        }else{
            $flag =1;
        }
        $b= 3; //显示条数
        $list  = $news->order('create_time desc')->limit($p,$b)->select();
        $arr[0] = $flag; 
        $arr[1] = $list;
        $arr.join();
        $this->ajaxReturn($arr,'JSON');
    }
}

thinkphp3.2.3的ajax加载更多

推荐阅读更多精彩内容