Ajax+Java实现JavaWeb后端分页技术
- 开发背景
- 业务需求
- 技术需求
- 使用Ajax异步实现查找数据库
- 代码实现细节
- 客户端Ajax代码
- 页面效果
- 思路
- 源码
- 后端Java代码
- 思路
- 实际业务代码
开发背景
好久没有写开发了！ 研究生入学已经入学两个月，自己写的报告自动生成系统也用到了很多以前没有接触过的技术，打算写成博客进行总结 。
业务需求
服务端根据用户的选择条件去数据库查询数据，然后以分页的形式回显到客户端。
技术需求
在数据量非常大的情况下，如果我们一次性查询数据库会有如下的缺点
- 大量数据的搜索会非常的耗时；
- 将大量数据进行封装回显到前台，客户端的加载压力大，耗时长；
使用Ajax异步实现查找数据库
Ajax能够异步访问服务端，实现对服务器的异步请求。结合分页，每次只请求当前页的数据从而大大减小服务端和客户端的压力。
代码实现细节
客户端Ajax代码
页面效果
思路
1、初始化分页数据
2、发出第一次请求，加载第一页数据
3、初始化页面操作控件
4、给每个按钮绑定点击事件
源码
HTML源码
<div class="Hui-article">
<article class="cl pd-20">
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l">筛选结果</span>
<span class="r"> </span>
</div>
<div id="table" class="mt-20">
<table class="table table-border table-bordered table-hover table-bg table-sort">
<tr>
<th>计划类别</th>
<th>实施方案名称</th>
<th>实施方案编号</th>
<th>被抽样单位名称</th>
<th>抽样场所</th>
<th>行政区域</th>
<th>样品名称</th>
<th>食品类型</th>
<th>食品亚类</th>
<th>食品次亚类</th>
<th>食品细类</th>
<th>标识生产企业名称</th>
<th>抽样时间</th>
<th>抽样环节</th>
</tr>
</table>
<div id="footer" style="margin-top: 15px;">
<span id="summary"></span>
<div id="rightblock" style="float: right;">
<ul class="pagination" style="float: left;">
<li><a id="01" >首页</a></li>
<li><a id="02" >上一页</a></li>
<li><a id="03" >下一页</a></li>
<li><a id="04" >最后一页</a></li>
</ul>
<div id="select" style="float: left; margin-top: 13px;">
<span>跳转到 </span>
<input type="text" name="pageNum">
<span> 页 </span>
<input type="button" name="go_btn" value="跳转" style="background-color: #add8e6b8;color: black;padding: 8px 16px;text-decoration: none;border-radius: 5px;">
</div>
</div>
</div>
<div style="margin: 0 auto; width: 200px;">
<input class="btn btn-primary radius" style="background-color: green"
type="button" value=" 返回 " onclick="Back()">
<input class="btn btn-primary radius" style="background-color: green"
type="button" value=" 生成报告 " onclick="creatReport()">
</div>
</div>
</article>
</div>js源码
/*初始化当前请求的页数，当前页多少数据，共有多少页数据*/
var pageNum = 1;
var pageSize = 0;
var pages = 0;
/*初始页面，查询第一页的数据*/
loadData(pageNum, pageSize);/*loadData方法实现细节*/
function loadData(pageNum, pageSize) {
$(".detail").remove(); //每次重新从API数据接口获取数据都要先清除原先表格 `<tr>` 的内容
$.ajax({
url : "./FenYe",
type : "POST",
data : {
"pageNum" : pageNum,
"pageSize" : pageSize,
},
dataType : "json",
success : function(result) {
var totalCount = result.total;//一共有多少记录
if(totalCount <= 0){//没有数据则回调到参数选择页面
alert("没有符合当前条件的数据");
window.location.href = "./SearchPoolServlet";
}
var list = eval（result.list);
pages = result.pages;//总页数
for (var i = 0; i < list.length; i++) {//遍历数据集
//从数据集中获取数据
var bsfl1 = list[i].bsfl1;
var ssfamc = list[i].ssfamc;
var ssfabh = list[i].ssfabh;
var bcydwmc = list[i].bcydwmc;
var cydd2 = list[i].cydd2;
var xsq = list[i].xsq;
var ypmc = list[i].ypmc;
var spdl = list[i].spdl;
var spyl = list[i].spyl;
var spcyl = list[i].spcyl;
var spxl = list[i].spxl;
var bzscqymc = list[i].bzscqymc;
var cysj = list[i].cysj;
var cydd1 = list[i].cydd1;
//将数据显示到前台
appendData(bsfl1, ssfamc, ssfabh, bcydwmc, cydd2,
xsq, ypmc, spdl, spyl, spcyl, spxl,
bzscqymc, cysj, cydd1);
}
displayFooter(totalCount, pages, pageNum);
}
});
}/*appendData方法实现细节*/
function appendData(bsfl1, ssfamc, ssfabh, bcydwmc, cydd2, xsq, ypmc,
spdl, spyl, spcyl, spxl, bzscqymc, cysj, cydd1) {
var text = '<tr class="detail"><td>' + bsfl1 + '</td><td>' + ssfamc
+ '</td><td>' + ssfabh + '</td><td>' + bcydwmc
+ '</td><td>' + cydd2 + '</td><td>' + xsq + '</td><td>'
+ ypmc + '</td><td>' + spdl + '</td><td>' + spyl
+ '</td><td>' + spcyl + '</td><td>' + spxl + '</td><td>'
+ bzscqymc + '</td><td>' + cysj + '</td><td>' + cydd1
+ '</td></tr>';
$("#table table").append(text);
}/*显示页面操作控件*/
function displayFooter(totalCount, pages, pageNum) {
var newText = '共' + totalCount + '条，' + '第' + pageNum + '页，' + '共'
+ pages + '页';
$("#summary").text(newText);
}/*给各组件绑定事件*/
$("input[name='pageNum']").keydown(function(e) {
if (e.keyCode == 13) {
$("input[name='go_btn']").click();
}
});
$("input[name='go_btn']").click(function() {
var goPage = $("input[name='pageNum']").val();
if (goPage >= 1 && goPage <= pages && goPage != pageNum) {
pageNum = goPage;
loadData(pageNum, pageSize);
} else {
return false;
}
});
$("#01").click(function() {
pageNum = 1;
loadData(pageNum, pageSize);
});
$("#04").click(function() {
pageNum = pages;
loadData(pageNum, pageSize);
});
$("#02").click(function() {
if (pageNum == 1) {
return false;
} else {
pageNum--;
loadData(pageNum, pageSize);
}
});
$("#03").click(function() {
if (pageNum == pages) {
return false;
} else {
pageNum++;
loadData(pageNum, pageSize);
}
});后端Java代码
在服务端，我们需要根据客户端显示的当前页和每页的数据量来实现数据的查找。
思路
我们用SQL语句的limit关键字实现查找
/*实现表的前10条数据*/
SELECT * FROM TABLE LIMIT 0,10实际业务代码
- pageNum:当前第几页
- pageSize:每页显示的数据量
SELECT * FROM TABLE LIMIT (pageNum - 1)*pageSize + "," + pageSize;
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
