具体的效果是这个样子的:刚进入页面时加载一部分数据(比如指定加载5条),底部有个加载更多,点击后,再加载五条数据,底部仍然有个加载更多,再点击,再加载5条数据。。。直到数据库中数据加载完毕后,由原本的“加载更多”变为“数据加载完毕了哟”,也同时停止加载数据。
实现这个功能的目的和分页功能类似,都是为了在数据过多时能够一部分一部分地加载,而非一次性加载完,过多的耗时,影响用户体验,且给服务器造成负担。
这篇博文就用Ajax来实现这个效果。
在实现这个效果的过程中,我使用了cookie这个工具,是为了记住加载的次数。原本有第1-5条数据,第一次点击“加载更多”取出第6-10条数据,第二次点击取出第11-15条数据,第三次点击取出第16-20条数据,,,依次类推,直到数据取完位置。下面附上效果截图 哆啦网。
接下来罗列实现效果的代码,具体的css代码就不罗列了,如果想使用,可以留言来联系我,下面主要说一下实现这个效果的代码。
1.首先,用Java创建一个cookie
Cookie cookie=new Cookie("toast","1");
cookie.setMaxAge(1*60);
response.addCookie(cookie);
2.定义展示吐槽的地方,并先加载开始的五条数据。最外层的div是包含所有吐槽以及“加载更多”的div,第二层未定义c