Ajax提交分页请求，实现异步刷新效果

Posted 2020-06-21

一、使用JsonArray传递

java代码

@RequestMapping(value="/myphotopage")
public  HttpEntity<JSONArray> myphoto2(int pageNum,HttpSession session,HttpServletResponse resp) throws Exception{
UserInfo user=(UserInfo) session.getAttribute("user");
JSONObject json=new JSONObject();
JSONArray jsonArray=new JSONArray();
if(user!=null){
// 定义的总记录数
int dataCount = 0;
// 定义当前页
//  pageNum = 1;
// 定义总页数
int pageCount = 0;
// 定义每页显示条数
int pageSize = 6;
// 开始索引
int startIndex = 0;
dataCount=photoService.countPhotoByUserid(user.getUserid());
if(dataCount%pageSize == 0){
pageCount = dataCount/pageSize;
}else {
pageCount = dataCount/pageSize + 1;
}
if(pageNum!=0){
startIndex = (pageNum-1)*pageSize;
}
List<Photo> photos=photoService.getPhotoByPageNumAndUserid(user.getUserid(), startIndex);
json.put("dataCount", dataCount);
json.put("pageNum", pageNum);
json.put("pageCount", pageCount);
jsonArray.add(photos);
jsonArray.add(json);
}else{
resp.sendRedirect("templates/login.jsp");
}
HttpEntity<JSONArray> httpEntity=new HttpEntity<JSONArray>(jsonArray);
return httpEntity;
}

jsp代码

function showpage(pageNum) {
$.ajax({
url : "/shoots/myphotopage.do?pageNum=" + pageNum,
type : "get",
dataType : "json",
success : function(data) {
var objs = eval(data);
//取出回送的数据
//list代表后台发送回来的集合。
//info中封装了一些其他信息。
var list = objs[0];
var info = objs[1];
var page = "";
var result = "";
result = "<table class=‘table‘><thead>";
result += "<tr><th>图片编号</th><th>图片类型</th><th>上传时间</th><th>收藏数量</th><th style=‘width: 26px;‘></th></tr>";
result += " </thead><tbody>";
//遍历集合 index为索引，element为对象
$.each(list,function(index, element) {
//拼接字符串
result += "<tr>";
result += "<td>"
+ element.photoid
+ "</td>";
result += "<td>"
+ element.ptype.ptcon
+ "</td>";
result += "<td>"
+ element.phototime
+ "</td>";
result += "<td>"
+ element.likenum
+ "</td>";
result += "<td><button aria-hidden=‘true‘ data-toggle=‘modal‘ class=‘icon-pencil‘";
result += "data-target=‘#showinfo‘  data-photoid=‘"
+ element.photoid
+ "‘  data-path=‘"
+ element.photoname
+ "‘";
result += "data-remake=‘"
+ element.photoremake
+ "‘  onclick=‘iii()‘></button> </td>";
result += "</tr>";
});
result += "</table>";
if (info.pageNum == 1) {
page += "首页 上页";
} else {
var up = info.pageNum - 1;
page += "<input type=‘button‘ name=‘first‘ value=‘首页‘ onclick=‘showpage(1)‘ />  <input type=‘button‘ name=‘up‘ value=‘上页‘ onclick=‘showpage("
+ up + ")‘ />"
}
if (info.pageNum == info.pageCount
|| info.pageCount == 0) {
page += "下页 尾页";
}
if (info.pageNum < info.pageCount) {
var nex = info.pageNum + 1;
page += "<input type=‘button‘ name=‘first‘ value=‘下页 ‘ onclick=‘showpage("
+ nex
+ ")‘ /><input type=‘button‘ name=‘first‘ value=‘尾页 ‘ onclick=‘showpage("
+ info.pageCount + ")‘ /> "
}
page += "共 " + info.dataCount + " 条记录   第"
+ info.pageNum + "页/共" + info.pageCount
+ "页";
$("#page").html(page);
$("#cont").html(result);
}
});
}