javascript - 如何实现点击“加载更多”？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 如何实现点击“加载更多”？

大家讲道理 2017-04-10 17:08:20

[JavaScript讨论组]

1397


    

        
        
            
                
                    
                        
                            
                                
                                ${task.title}
                                公示中
                            
                            
                                ￥${task.startBudgetPrice }-${task.endBudgetPrice}元 
                                人浏览
                                ${task.applayNumber}人申请
                            
                        
                    
                
            
        
    
    
        加载更多...

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(13)

PHP中文网2017-04-10 17:10:20 13楼

关键就在于前台保存一个当前分页数，传给后台根据分页取数据

赞 +0

添加回复

天蓬老师2017-04-10 17:10:20 12楼

$('.load').click(function(){
    $.ajax({
        ...
        ...
        success:function(msg){
            if(msg.isSucc == true){
                $('.task-list-wrapper').appendTo('<section>这里应该是请求到的数据</section>');
            }
        }
    });
});

赞 +0

添加回复

伊谢尔伦2017-04-10 17:10:20 11楼

可以页面加载完毕直接请求ajax数据根据分页参数p

赞 +0

添加回复

高洛峰2017-04-10 17:10:20 10楼

不知道你要的是分多次加载，还是先请求全部数据再分多次显示。
如果是前者，需要后端提供可以分页的api，然后前端这边发送页码等参数过去，就可以实现分页效果。

$.ajax({
    url : '/api/list',
    type : "get",
    data: {
      pageSize : 15,
      pageNumber : page
    },
    async : false,
    success : function(data) {
    //刷新dom数据
    }
  });

如果是后者，无非就是一个listNum = listNum+15的问题，每次点击都多显示出15个，又两种方案：一个是先把所有的dom都加载，然后用display:none的方式模拟；一个是在js先把数据都先得到，在分批次append到dom。这两个对题主应该没有问题。

赞 +0

添加回复

PHP中文网2017-04-10 17:10:20 9楼

/*
     * getWorldList
     * @page:加载第几页，默认从第一页
     * @rows:一页加载多少条数据
     * */
    var rows = 10,
        page = 1,
        queryparam = '';
    var dataList = {
        "rows": rows,
        "page": page,
        "queryparam": queryparam
    };
    getWorldList();
    function getWorldList() {
        util.ajaxFun(util.INTERFACE_URL.getPolicyList, 'get', dataList, function (res) {
            if (res.rtnCode === "0000000") {
                handlebars.registerHelper('formatDate', function (date) {
                    return getTime(date);
                });
                if(res.bizData.rows.length == 0){
                    $('#policy-tpl').html(noDataTips('真抱歉,没有检索到相关的新闻'))
                } else {
                    $('#policy-tpl').html('');
                }
                var template = handlebars.compile($("#policy-list").html());
                $('#policy-tpl').append(template(res.bizData));
                if (res.bizData.records > rows) {
                    $('.btn-next').show();
                } else {
                    $('.btn-next').hide();
                }
                if (res.bizData.rows.length < rows) {
                    $('.btn-next').hide();
                } else {
                    $('.btn-next').show();
                }
                $('.data-list').removeClass('hide');
                $('.btn-next').text('加载更多').removeAttr('disabled');
            }
        });
    }

    $('.btn-next').on('click', function () {
        $('.btn-next').text('加载中...').attr('disabled', 'disabled');
        dataList.page++;
        getWorldList();
    });

核心在于append追加，然后page++ 自己领悟下就ok了

赞 +0

添加回复

PHP中文网2017-04-10 17:10:20 8楼

看你的样子用的应该是java写的后端（<c:when>, <c:forEach>...)。为了实现加载更多，其实就是点击按钮后在不刷新页面的情况下添加更多的内容显示到当前页面中。用ajax拉取数据，前提是后端能够根据条件（例如：页号、分类、关键字什么。。。）来获取数据。为了方便对需要显示的<article></article>的内容进行维护，我们可以使用模板类，将你上面那段页面代码中的jstl标签换成用javascript来进行逻辑判断，循环的部分既可以使用模板提供的语法进行循环，也可以在js中循环拼接生成你所需要的html片段。

页面代码修改为类似这样

……

<article class="task-list-wrapper" data-pageNo="${pageNo}" data-keyword="${keyword}">
</article>

……

<p class="loadMore">
    <a href="javascript:;">加载更多...</a>
</p>

模板代码，也就是将之前删除的部分独立开来成一个模板，我这里用的是arttemplate这个js插件，这个算是用的比较多的了吧，楼主可以试一下

<!-- 需要循环加载显示的内容模板 -->
<script type="text/html" id="board">
    <section>
        <a href="">
            <h4>
                <i></i>
                <span>{{ title }}</span>
                <b>公示中</b>
            </h4>
            <p>
                <span class="price">￥{{ startBudgetPrice }}-{{ endBudgetPrice }}元 </span>
                <span><web:taskBrowseByTaskId taskId="{{ taskId }}"/>人浏览</span>
                <span>{{ applayNumber }}人申请</span>
            </p>
        </a>
    </section>
</script>

准备工作到此结束，现在开始展示核心代码了，此处的示例简化了一些参数的逻辑判断，因为我并不清楚你后台返回的数据到底是什么样的，但是示范作用可以达到！

<script type="text/javascript">

    /*点击加载更多按钮的时候ajax拉取所要显示的数据并显示*/
    $("loadMore").click(function() {
        // 想要传入的参数，我在这里简化为页号，具体的根据你后台的接口所需要的参数为准，
        // 这里只是示例作用
        var params = {
            pageNo: $("article.task-list-wrapper").data("pageNo"),
            keyword: $("article.task-list-wrapper").data("keyword")
        }

        // 调用下面定义的拉取数据并处理数据显示的函数
        ajaxSubmit("xxxxx", params);
    });

    /*上传参数并根据返回的数据来添加内容到页面中，达到加载更多的效果*/
    function ajaxSubmit(url,params) {
        $.ajax({
            type: "post",
            dataType: "json",
            url: url,
            data: {
                // 上传的参数
                pageNo: params.pageNo || 1,
                keyword: params.keyword || ""
            },
            async: false,
            error: function () {
                alert("提交失败");
            },
            success: function (data) {
                generateSection(data);
            }
        });
    }

    function generateSection(data) {
        // $list为后台返回的json数据，里面包含你所想要指定数目的记录的详细数据
        var $article = $("article.task-list-wrapper"), 
            list = data["list"],
            html="";

        // 读取list中的每一条记录并将其生成一个section放入article中
        $.each(list, function (index, value) {
                // 将一条记录中的数据抽取出来并放入一个json对象中供模板方法使用
                   var detailsData = {
                       title: value["title"],
                       startBudgetPrice: value["startBudgetPrice"],
                       endBudgetPriced: value["endBudgetPriced"],
                       taskId: value["taskId"],
                       applayNumber: value["applayNumber"]
                   };

                // template为arttemplate中的渲染模板的函数。可以根据上面定义的模板及给定的数据
                // 生成html代码
                html += template("board", detailsData);
            });
        // 将当前这一次生成的n条记录对用的html代码添加到article中，加载更多的显示效果在此处完成
        $article.append(html);
    }
</script>

我也是新手，这是前不久做的一个项目的内容的总结吧，有问题就谢谢大神能够指出错误了或者更好的方案了！

赞 +0

添加回复