美文网首页Thinkphp
thinkphp3.2.3的ajax加载更多

thinkphp3.2.3的ajax加载更多

作者: 一知半解 | 来源:发表于2017-05-15 17:34 被阅读0次

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

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 ''">
                                ![]({$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=\"'+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加载更多

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

  • AJAX 加载更多

    jsbin展示 封装的ajax函数,post、get请求都可以使用 前端html 后端router.js

  • ajax(实现加载更多)

    题目1:ajax 是什么?有什么作用? ajax是异步的javascript和xml 1优点 实现网页的异步加载,...

  • ajax点击加载更多

    ajax实现点击加载更多效果逻辑还是相对比较简单,点击按钮累加分页数据即可。 一、说明 首先,通过后端程序猿欧巴提...

  • AJAX的知识梳理

    【目录】 一、用AJAX加载CSS二、用AJAX加载JS三、用AJAX加载HTML四、用AJAX加载XML五、用A...

  • 织梦DEDECMS”点击加载更多””无限下拉”Infinite

    织梦DEDECMS”点击加载更多“”无限下拉“Infinite Ajax Scroll插件,支持动静态,支持图片延...

  • AJAX 加载更多(加数据锁)

    jsbin展示 有时候网络延时,用户多次点击按钮发送请求,后端接收到多个重复的请求,浪费流量。 在前端加个数据锁就...

  • 项目中遇到的问题1

    优酷节目页,每个tab hover的时候 先是自动加载一部分 然后下拉时加载更多,利用分页 page值从ajax返...

  • Ajax技术是什么东西

    Ajax是什么东西? 使用AJAX的网页,内容是异步加载的。没有使用AJAX的网页,在网页完全打开的时候,加载就完...

  • 原生Js封装Ajax

    这是一个点击加载更多的插件,点击more按钮,请求ajax,将依次加载3条数据 html由一个ul和一个butto...

网友评论

    本文标题:thinkphp3.2.3的ajax加载更多

    本文链接:https://www.haomeiwen.com/subject/dovhxxtx.html