因为做的微信端的网页,所以在显示后台数据的时候,要么分页,要么全部加载数据,开始分页对于用户来说,其实体验不是很好,毕竟要去不断的点击下一页,但是如果我把全部数据读取出来的话,但用户可能也就看前面几条而已,那么就会造成性能的大大浪费。

所以我就上网找了ajax懒加载方面的内容,成功实现了,在用户滚动的时候判断是否到达页面底部,是的话就通过ajax请求数据,然后显示出来。

javascript代码

<script type="text/javascript">
$(function() {
// 记录页数
var $page = 1;
// 懒加载
var winH = $(window).height(); //页面可视区域高度
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$page++;
$.ajax({
type : "get",
url : "<c:url value='/getdata/" + $page + "' />",
dataType : "json",
success : function(data) {
if (data) {
$.each(data,function(index,array){
$comment += "<li><div id=\"index_list_user\">";
$comment += " <div id=\"index_list_user_wx\">";
$comment += " <img src=\"" + array['avatar'] + "\" >";
$comment += " <span>" + array['author'] + "</span>";
$comment += " </div>";
$comment += " <span id=\"index_list_user_bookName\">《" + array['book']['title'] + "》</span>";
$comment += " </div>";
$comment += " <div id=\"index_list_content\">";
$comment += " <span>" + array['content'] + "</span>";
$comment += " </div>";
$comment += " </li>";
$(".index_list").append($comment); // 把上面的html添加到要显示的标签上
});
}
}
});
}
});
});
</script>

java代码

@RequestMapping(value = "/getdata/{page}", method = GET)
@ResponseBody
public List<Comment> indexPage(
@PathVariable int page) {
page--;
page = page < 0 ? 0 : page;
List<Comment> bookComments = rmbookCommentService.getToIndexByLimit(
page*ReadMeetInitParameters.getCountPerPage(), ReadMeetInitParameters.getCountPerPage()); return bookComments;
}

在Java代码上转换JSON的时候可能会有问题,我参考的解决方案:http://blog.csdn.net/kinginblue/article/details/51236938

参考地址:http://www.jb51.net/article/65073.htm

Java Web SpringMVC AJAX,实现页面懒加载数据的更多相关文章

  1. Ionic3新特性--页面懒加载2加载其他组件

    在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件Component.Pipe.Directive等的模块化,和加载使用. 首先说明一点, ...

  2. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  3. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  4. Ajax实现页面动态加载,添加数据

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products ...

  5. Ajax页面的加载数据与删除

    1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...

  6. Ionic3新特性--页面懒加载1

    Ionic3新的懒加载机制给我带来了如下新特性: 避免在每一个使用到某Page的Module或其他Page中重复的import这个类(需要写一堆路径) 允许我们通过字符串key在任何想使用的地方获取某 ...

  7. Selenium处理页面懒加载方法

    在做selenium webdriver  在做UI自动化时,有些页面时使用懒加载的形式显示页面图片,如果在不向下移动滚动条时,获取到的图片会是网站的默认图片和真实的图片不相符. 1.滑动滚动条 1. ...

  8. Java 并发专题 :FutureTask 实现预加载数据 在线看电子书、浏览器浏览网页等

    继续并发专题~ FutureTask 有点类似Runnable,都可以通过Thread来启动,不过FutureTask可以返回执行完毕的数据,并且FutureTask的get方法支持阻塞. 由于:Fu ...

  9. jQuery+Ajax滚屏异步加载数据实现(附源码)

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

随机推荐

  1. firefox 59 无法使用 pac 代理上网

    最近装了 firefox,电脑配置不太高,chrome 太吃内存了. 但是发现 SwitchyOmega的 pac 模式无法工作,这篇文章提到了两个思路, 其中network.dns.disableI ...

  2. 【python】Python任务调度模块 – APScheduler

    APScheduler是一个Python定时任务框架,使用起来十分方便.提供了基于日期.固定时间间隔以及crontab类型的任务,并且可以持久化任务.并以daemon方式运行应用.目前最新版本为3.0 ...

  3. Java面向对象之关键字this 入门实例

    一.基础概念 1.关键字this是指:哪个对象调用this所在的函数.this就指向当前这个对象. 2.用法: (1).this关键字可以解决:构造函数私有化问题. 注意:构造函数只能被构造函数调用, ...

  4. 安装vm tools(方便虚拟机复制粘贴切换)

    在VMware虚拟机中安装好了VMware Tools,才能实现主机与虚拟机之间的文件共享,同时可支持自由拖拽的功能,鼠标也可在虚拟机与主机之前自由移动(而不再用按ctrl+alT释放),而且还可以令 ...

  5. Python 简单说明与数据结构

    Python 简单说明与数据结构 Python 作为 "国内" 较流行的高级语言,具有代码容易理解.专注解决问题.混合编译其他语言的优点. 变量 变量是一个最基本的储存单位,它暂时 ...

  6. 老男孩Day17作业:后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

  7. 根据枚举获取枚举的Description特性值

    首先定义一个枚举:两个值:已确认.未确认. public enum ConfirmStatusEnum { [Description("未确认")] unconfirmed = , ...

  8. springcloud整合bus

    bus的使用主要是配合springcloud config部分来一起使用,并没有单独使用 首先建立服务端: <dependency> <groupId>org.springfr ...

  9. mysql 表的分区

    如何判断当前MySQL是否支持分区 命令:show variables like '%partition%' 运行结果: mysql> show variables like '%partiti ...

  10. filezilla绑定编辑器

    编辑  - >设置 ->文件格式关联 ->输入需要关联的编辑器的路径