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

var d = {};
d.page = ++$page;
d = JSON.stringify(d);
$.ajax({
    url : '',
    data : d,
    ...
    success : function(data){
        //...将数据插入dom
    }
})

Answer 2

这里提供一个简单的思路,点击加载更多,进行ajax提交，提交参数为当前页数和单页数量,然后将获取的数据进行html封装,最终将将封装的html添加到列表容器后面.

Answer 3

是的，这其实是一个分页问题。