Ajax实用案例,直接返回一个页面避免在前端each

PHP 1207浏览 评论

今天遇到一个小伙伴问了我一个问题,他在做一个内容列表的时候用到ajax加载更多,在请求数据之后使用each拼接内容,各种错误,蛋疼的一b有木有。

来张图,看下我们要实现的效果:

image.png点击下拉加载更多新闻加载更多的页面,比起传统的分页貌似更加高级点,但我想说实现起来比传统的分页也是更加简单。

简单的说下实现原理:

  1. 我们默认读取第一页的数据来显示

  2. 定义一个隐藏域用户存储分页值,默认为1,当点击按钮触发ajax时间将页码+1

  3. 将页码传到服务端读取数据,循环数据,返回页面即可!


前端代码:

<div class="list">
    <div class="tab_con">
        <!--图片 278 * 204-->
        <ul id="page_list">
            <?php foreach($df_news as $v){?>
            <li><a href="<?php echo url('article/newarticle',['id'=>$v['id']])?>"class="clear">
                <img src="/uploads/<?php echo $v['image']?>" alt="" width="278" height="204"/>
                <h6><?php echo $v['title']?></h6>
                <p><?php echo mb_substr($v['introduction'],0,30,'utf-8')?></p>
                <span>发布时间:<?php echo date('Y-m-d',$v['create_time'])?></span>
                <div>
                    <p><i></i><?php echo $v['read_num']?>人浏览</p>
                    <label><?php echo $v['type_name']?></label>
                </div>
            </a>
            </li>
            <?php } ?>
        </ul>
    </div>
    <!--隐藏域,用来保存页码-->
    <input type="hidden" id="page" value="1">
    <a class="link_more" href="javascript:;">下拉加载更多新闻</a>
</div>

<script>
    $(".link_more").click(function(){
        var page = $("#page").val(); //获取隐藏域的页码
        var nextPage =  1 + parseInt(page); //点击一次将页码+1
        $("#page").val(nextPage);  //将隐藏域的值替换
        var getPage = $("#page").val(); //再次获取隐藏域的页码值
        $.ajax({
            type:'post',
            url:"<?php echo url('Ajax/ajaxPage')?>",
            data:{'page':getPage}, //将页码传到服务端
            success:function(data){
                if(data.code == 10020){
                    layer.msg(data.msg,{icon:5,time:1000});
                }else{

                    $("#page_list").append(data);
                }
            }
        });

    });
</script>

php代码

public function ajaxPage(){
    try{
        $page = input('param.page');
        //因为我们默认显示了第一页的数据,因此下一次从第二页开始
        if(empty($page) || $page < 2){
            throw new \LogicException('加载新闻失败',10020);
        }
        $new = new \app\data\Data('news');
        //查询总条数
        $where = "type_id != 12 and image != ''";
        $count = $new->count($where);
        $count_page = ceil($count / 8); //计算一共有多少页
        //计算开始页
        $start_page = ($page - 1) * 8;
        $limit = $start_page.',1';
        //判断当前页是否大于总页数,大于抛出异常
        if($page > $count_page){
            throw new \LogicException('没有更多啦!',10020);
        }
        //查询数据
        $list = self::getNewsType(
            $where,
            $limit,
            'create_time desc',
            "a.id,a.title,a.create_time,a.image,b.type_name,a.introduction,a.read_num"
        );
    }catch(\Exception $e){
        return json(['code'=>$e->getCode(),'msg'=>$e->getMessage()]);
    }
    //这里是重点了,我们view直接显示一个页面,也就是ajax请求将返回这个页面,
    return view('ajaxPage',[
        'list' => $list
    ]);
}


ajaxPage.html页面代码

<?php foreach($list as $v){?>
<li><a href="<?php echo url('article/newarticle',['id'=>$v['id']])?>"class="clear">
    <img src="/uploads/<?php echo $v['image']?>" alt="" width="278" height="204"/>
    <h6><?php echo $v['title']?></h6>
    <p><?php echo mb_substr($v['introduction'],0,30,'utf-8')?></p>
    <span>发布时间:<?php echo date('Y-m-d',$v['create_time'])?></span>
    <div>
        <p><i></i><?php echo $v['read_num']?>人浏览</p>
        <label><?php echo $v['type_name']?></label>
    </div>
</a>
</li>
<?php } ?>

请求成功我们将数据使用php将数据循环好之后,再返回到前端页面,我们只需要apend追加到后面就可以了!

我们直接返回页面比起返回json数据无疑更加简单,而且返回json 前端使用each来循环拼接字符串很容易出错。

还有很多地方可以用到此招,比如tab切换加载数据时,分页加载时,只要我们深入的理解他就能灵活的运用他!

代码都在这里了,有用到的朋友可以参考一下思路,自己写业务逻辑!


本文连接:http://www.phpbloger.com/article/28.html 文章都为原创,转载请注明出处!

相关文章