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);
}
我也是新手,这是前不久做的一个项目的内容的总结吧,有问题就谢谢大神能够指出错误了或者更好的方案了!
html加载更多实现代码,如何实现点击“加载更多”?相关推荐
- WordPress下拉加载插件Infinite Scroll之手动点击加载实现
本文基于上一篇博文<WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录>而写,上文说到WordPress插件Infinite Scroll的自动加载分页 ...
- ios html加载css样式,iOS加载HTML, CSS代码
NSString *strHTML = @" // NSString *strHTML = model.goods_datails; NSMutableString *targerStr = ...
- win7计算机加载项,详细教您win7禁用ie加载项
小编发现最近有小伙想知道win系统里面ie浏览器使用禁用加载项的操作办法.所以小编就花了一番时间来了解这个方面的知识是小编现在win7ie浏览器使用禁止加载步骤的,方法来分享给你们. 禁止加载项?小伙 ...
- 火信根据用户ID自动化加好友Auto.js代码、群成员加好友、自动拉好友进群
首先打开添加好友页面,然后运行Auto.js代码,输入起始ID,下面代码默认循环添加100个!,后面升级优化后的代码,请联系作者.可加Q交流:2905154974 auto.waitFor(); va ...
- android 底部加载更多,android:ScrollView滑动到底部显示加载更多(示例代码)
这是效果 主要是onTouchListener监听事件,监视什么时候滑到底部 同时要理解getMeasuredHeight和getHeight的区别 getMeasuredHeight:全部的长度 包 ...
- PHP+Ajax点击加载更多列表数据实例
PHP+Ajax点击加载更多列表数据实例 一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过"更多"按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的 ...
- 前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- 前端基础建设与架构10 代码拆分和按需加载:缩减 bundle size,把性能做到极致
这一讲,我们将对代码拆分和按需加载这一话题进行解析. 随着 Webpack 等构建工具的能力越来越强,开发者在构建阶段可以随心所欲打造项目流程,代码拆分和按需加载技术在业界曝光量也越来越高.事实上,代 ...
- C#反射报错:无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性
今天用反射报错: 无法加载一个或多个请求的类型.有关更多信息,请检索 LoaderExceptions 属性 报错代码如下: var Assembly.LoadFile(dllPath); var t ...
最新文章
- 周志华教授:关于深度学习的一点思考!
- 应用在机器学习中的聚类数据集产生方法
- java 在线电影_java电影在线影评管理系统
- Java中的带参方法
- 前端工程师笔试题(欢迎评论留言)
- SHELL 脚本小技巧
- 中有atoi函数吗_C++ 多态的实现及原理,深挖vptr指针,手动调用虚函数
- node.js整理 07例子
- c语言试题c组卡片换位,蓝桥杯 卡片换位 - 李韬|aitom|机器人|SLAM - OSCHINA - 中文开源技术交流社区...
- 大白话讲高项高频知识点(在线更新)
- 实现一个二维码支持微信和支付宝同时收付款
- 自己做的一个漫画下载器
- python中response是什么意思_python中的requests,response.text与response.content ,及其编码
- 五步轻松搞定QGIS三维地形浏览
- 手把手教你电脑图片转文字怎么操作,助你提高工作效率
- Heap-Unlink一谈
- SVG 的 foreignObject 标签
- 渐进式复杂度分析-学习笔记
- FFmpeg视频解码器
- 腾讯发布的开发语言安全指南:Javascript安全指南