ajax实现点击加载更多

80 阅读 0 评论 53 点赞

我是靠谱客的博主健忘芒果，最近开发中收集的这篇文章主要介绍ajax实现点击加载更多，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先定义自己的文章结构

<div class="news">
        <ul class="list">
            <li class="flex-between">
                <img src="images/1.jpg" alt="">
                <div>
                    <p><a href="{$list.url}" title="{$list.title}">文章标题</a></p>
                    <span>文章简介</span>
                </div>
            </li>
        </ul>
        <button class="more" id="More">点击加载更多</button>
        <!-- 当前栏目ID -->
        <p id="cid" style="display:none;">{$cid}</p>
</div>复制代码

<script>
            //新闻栏目ID
            var cid = $('#cid').text();
            //分页，从第二页开始
            var Pages = parseInt('1') + 1;
            //数量
            var Limit = 5;
            //需要追加到哪个元素下
            var Dom = jQuery('.list');
            //#More按钮点击时执行ajax

            jQuery('#More').on('click', function() {
                var url = `http://www.*******.com/index.php/Api/list?cid=${cid}&limit=${Limit}&pages=${Pages}`;
                jQuery.ajax({
                    //请求类型
                    type: 'POST',
                    //请求地址
                    url: url,
                    //返回数据类型
                    dataType: 'json',
                    //请求成功
                    success: function(response, status) {
                        var Data = response.data;
                        console.log(Data);
                        //如果Data不等于空，证明有数据，开始执行以下方法
                        if (Data != '') {
                            //进行循环，value就是文章对象
                            jQuery.each(Data, function(index, value) {
                                var Html =
                                    `
                                    <li class="flex-between">
                                    <img src="${value.pic}" alt="${value.title}">
                                    <div>
                                    <p><a href="${value.url}" title="${value.title}">${value.title}</a></p>
                                    <span><if condition = "${value.desc}">{$list.desc}<else>{$list.content|str2sub=35, true}</if>${value.desc}</span>
                                    </div>
                                    </li>`
                                //将变量Html的内容追加在事先定义好的变量Dom后
                                Dom.append(Html);
                            });
                            //分页+=1
                            Pages += 1;
                        }
                        //全部加载完毕提示
                        else {
                            jQuery('#More').text("没有更多内容");
                        }
                    },

                    //请求失败
                    error: function(xhr, status, error) {
                        console.log("请求对象XMLHttpRequest: " + xhr);
                        console.log("错误类型textStatus: " + status);
                        console.log("异常对象errorThrown: " + error);
                    }
                })
            })
</script>复制代码