Ajax提交分页请求,实现异步刷新效果(1)

前端之家收集整理的这篇文章主要介绍了Ajax提交分页请求,实现异步刷新效果(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


一、使用JsonArray传递


java代码

@RequestMapping(value="/myphotopage")
publicHttpEntity<JSONArray>myphoto2(intpageNum,HttpSessionsession,HttpServletResponseresp)throwsException{
UserInfouser=(UserInfo)session.getAttribute("user");
JSONObjectjson=newJSONObject();
JSONArrayjsonArray=newJSONArray();
if(user!=null){
//定义的总记录数
intdataCount=0;
//定义当前页
//pageNum=1;
//定义总页数
intpageCount=0;
//定义每页显示条数
intpageSize=6;
//开始索引
intstartIndex=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=newHttpEntity<JSONArray>(jsonArray);
returnhttpEntity;
}

jsp代码

functionshowpage(pageNum){
$.ajax({
url:"/shoots/myphotopage.do?pageNum="+pageNum,type:"get",dataType:"json",success:function(data){
varobjs=eval(data);
//取出回送的数据
//list代表后台发送回来的集合。
//info中封装了一些其他信息。
varlist=objs[0];
varinfo=objs[1];
varpage="";
varresult="";
result="<tableclass='table'><thead>";
result+="<tr><th>图片编号</th><th>图片类型</th><th>上传时间</th><th>收藏数量</th><thstyle='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><buttonaria-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{
varup=info.pageNum-1;
page+="<inputtype='button'name='first'value='首页'onclick='showpage(1)'/><inputtype='button'name='up'value='上页'onclick='showpage("
+up+")'/>"
}
if(info.pageNum==info.pageCount
||info.pageCount==0){
page+="下页尾页";
}
if(info.pageNum<info.pageCount){
varnex=info.pageNum+1;
page+="<inputtype='button'name='first'value='下页'onclick='showpage("
+nex
+")'/><inputtype='button'name='first'value='尾页'onclick='showpage("
+info.pageCount+")'/>"
}
page+="共"+info.dataCount+"条记录第"
+info.pageNum+"页/共"+info.pageCount
+"页";
$("#page").html(page);
$("#cont").html(result);
}
});
}
原文链接:https://www.f2er.com/ajax/162386.html

猜你在找的Ajax相关文章