html加载更多实现代码,如何实现点击“加载更多”？

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

页面代码修改为类似这样

……

……

加载更多...

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

{{ title }}

公示中

￥{{ startBudgetPrice }}-{{ endBudgetPrice }}元

人浏览

{{ applayNumber }}人申请

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

/*点击加载更多按钮的时候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);

}

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