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

Question

<p id="wrapper">

<p id="scroller">
    <article class="task-list-wrapper">
        <web:taskList var="taskList" status="1" keyword="${keyword}" pageidx="${pageidx}" pagesize="15" />
        <c:choose>
            <c:when test="${taskList != null && fn:length(taskList) > 0}">
                <c:forEach var="task" varStatus="vs" items="${taskList}">
                    <section>
                        <a href="">
                            <h4>
                                <i></i>
                                <span>${task.title}</span>
                                <b>公示中</b>
                            </h4>
                            <p>
                                <span class="price">￥${task.startBudgetPrice }-${task.endBudgetPrice}元 </span>
                                <span><web:taskBrowseByTaskId taskId="${task.taskId}"/>人浏览</span>
                                <span>${task.applayNumber}人申请</span>
                            </p>
                        </a>
                    </section>
                </c:forEach>
            </c:when>
        </c:choose>
    </article>
    <p class="loadMore">
        <a href="javascript:;">加载更多...</a>
    </p>
</p>

</p>

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

不知道你要的是分多次加载，还是先请求全部数据再分多次显示。
如果是前者，需要后端提供可以分页的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。这两个对题主应该没有问题。

Answer 5

/*
     * 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了

Answer 6

看你的样子用的应该是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>

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

Answer 7

说一下我的思路，在页面初始化的时候显示15个，这个你一定没问题的，然后再你需要点击的按钮上绑定click的回调函数，在这个函数里面你再写代码，每次获取15个显示出来就好了

Answer 8

点击事件绑定异步请求操作，之后根据一定的规则（如显示多少个？），append到list容器中，是这么个思路吗？

Answer 9

后台支持分页请求，前台记录页码。 第一页页码1,加载更多页码加1为2， 直到请求结果没有数据为止

Answer 10

用ajax异步，得到数据生成html接到页面里