java中点击加载更多，用ajax+ssh实现异步加载更多数据

最新推荐文章于 2021-08-05 14:41:43 发布

憨厚的牛儿

最新推荐文章于 2021-08-05 14:41:43 发布

阅读量2k

点赞数

文章标签： java ajax异步加载更多数据

本文链接：https://blog.csdn.net/weixin_42171786/article/details/80696281

版权

这篇文章适合刚开始研究异步加载更多数据的小白，我也是今天在项目中遇到客户需求，才研究了一下，在这里写下自己的想法和实现过程。这篇文章完全是为了说明异步加载数据的简单例子，之后还需要完善。

首先想要异步加载数据，首先就应该想到使用的是ajax，这次我写的就是ajax+SSH。

在我们点击一次加载更多之后，在原来的数据后追加固定条数的数据，在点击再追加，直到这一次点击所加载的数据数量少于每次加载数量时，就隐藏掉加载更多功能，然后显示没有更多数据。所以在这个过程中，点击加载更多的次数是最为重要的，控制我们所显示的数据。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>加载更多test</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var clickNum = 0;
function page(){
	clickNum++;
	$.ajax({
		type:"post",
		url:"page.action",
		data:{"clickNum":clickNum},
		dataType:"json",
		success:function(data){
			//解析data，users数组信息
			for(var i=0;i<data.length;i++){
				var id = data[i].userId;
				var name = data[i].userName;
				//创建一个li元素
				var sli = "<li>"+id+" "+name+"</li>";
				//添加到ul中
				$("#users").append(sli);
			}
			// 当查询结果数量少于每夜固定数量，加载更多功能隐藏，并提示用户没有更多数据
			if(data.length < 10){
				$("#page").hide();
				$("#info").show();
			}
		}
	});
}
</script>
</head>
<body>
<ul id="users">
</ul>
<div οnclick="page()" id="page"><p>加载更多</p></div>
<div id="info"