Ajax根据异步刷新div内列表内容，带前台JS获取列表li数量分页

博主2017年遇到的一个大问题，不过通过无数次的摸索，总算解决了，可能优化的不是很好，不过单纯从需求上讲，完成度很完美，下面就给大家讲一讲Ajax异步刷新div列表内容，加一个JS获取列表li数量的分页情况。

首先，给大家大致说一下需求：



根据鼠标onmouseover事件配合mouseenter事件，完成鼠标移入颜色加深的操作，同时进行Ajax异步刷新列表的功能，前台样式大家可以通过$(this).css（） 和 (this).siblings().css（）去设置，在此不细说了。

ajax处理异步刷新

下面为触发事件后的AJax：

/*异步刷新*/
function 方法名(方法参数){
$.ajax({
type: "post",
url: 跳转方法action,
data: 方法参数,
cache: false,
async : false,
dataType: "json",
success: function (data ,textStatus, jqXHR)
{
//异步刷新分页，后面细说
var str=data.list;
$(".row3_right ul").html(str);
zz=getzz();
if(zz.length%pagesize==0){
pageall =zz.length/pagesize ;
}else{
pageall =parseInt(zz.length/pagesize)+1;
}
change(1);
},

4000
error:function (XMLHttpRequest, textStatus, errorThrown) {
window.wxc.xcConfirm("出现异常，异常信息："+textStatus,"error");
return false;
}
});

}

后台处理：

/**
* 2018年1月2日10:00:00-异步刷新文章信息
*/

@ResponseBody
@RequestMapping(value = "/方法参数/方法名")
public Map<String,Object> listByfirstid(Model model,@PathVariable("方法参数") Integer 方法参数){
//走一下查询方法
List<InfoWithBLOBs> infoList = infoService.selectInfoByFirstSub(firstId);
//创建一个map集合
Map<String,Object> map = new HashMap<String, Object>();
//定义一个空的字符串
String str="";
//相应判断，根据实际需要进行判断
if(infoList != null && !infoList.isEmpty()){

for (InfoWithBLOBs i:infoList) {
if((i.getHead()).length()>20){
//重点：后台编写异步刷新代码（根据个人需要编写）
str+="<li><a href='javascript:void(0);' onclick=\"selectmenu("+i.getInfoId()+");\">"+
"<span style='color:#235183;float: left;padding-left: 20px;'>["+i.getSubName()+"]</span>"
+i.getHead().substring(0,20)+"......"+
"<span style='color:#666666;float: right; padding-right: 30px;'>"
+i.getDraftTime().substring(0,10)+"</span></a></li>";
}else{
str+="<li><a href='javascript:void(0);' onclick=\"selectmenu("+i.getInfoId()+");\">"+
"<span style='color:#235183;float: left;padding-left: 20px;'>["+i.getSubName()+"]</span>"
+i.getHead()+
"<span style='color:#666666;float: right; padding-right: 30px;'>"
+i.getDraftTime().substring(0,10)+"</span></a></li>";
}
}

}else{

str+="<li><span style='color:#333333;padding-left: 20px;'>该栏目没有对应的文章信息</li>";

}
map.put("list",str);                  //存入到map集合，然后在前台接收
return map;                           //返回map集合
}

提醒：博主因为时间关系都写成了内联样式，大家使用的时候尽量优化一下，减少前台代码在后台的使用。

Ajax处理异步分页

解决了异步刷新的问题，我们再来看看分页到底怎么弄：

首先，引入全局变量控制：

/*分页*/
var zz=getzz();
var pageno=1 ; //当前页
var pagesize=10; //每页多少条信息
if(zz.length%pagesize==0){
var  pageall =zz.length/pagesize ;
}else{
var  pageall =parseInt(zz.length/pagesize)+1;
}   //一共多少页
change(1);

想必大家都能看的懂，关键在于一定要把这个全局变量放在ajax里，每次异步刷新后，他才会重新计算，这时可以上去看ajax我标注的分页那一部分了。

下来是分页处理代码，博主为了防止代码冗余，写成了JS文件，大家如果也是这样，不要忘了JS导入：

var contextPath = "<%=request.getContextPath() %>";

function getzz() {
//.row3_right为需要异步刷新的div的class属性
var a = $(".row3_right ul li");
var zz =new Array(a.length);
for(var i=0;i <a.length;i++){
zz[i]=a[i].innerHTML;
} //div的字符串数组付给zz
return zz;
}
function change(e){
pageno=e;
if(e<1){
e=1;
pageno=1;//就等于第1页 ， 当前页为1
}
if(e>pageall){  //如果输入页大于最大页
e=pageall;
pageno=pageall; //输入页和当前页都=最大页
}
$(".row3_right ul").html("");//全部清空
var html="";
for(var i=0;i<pagesize;i++){
html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';//创建一页的li列表
if(zz[(e-1)*pagesize+i+1]==null) break;//超出最后的范围跳出
}
$(".row3_right ul").html(html);//给ul列表写入html

var ye="";
for(var j=1;j<=pageall;j++){
//页码缩进，省略作用
if(j < 4 || j < (e + 2) && j > (e - 2) || j > (pageall - 3)){
if(e==j){
ye=ye+"<span id='ye'><a href='javascript:void(0)' onClick='change("+j+")' style='color:#FFFFFF;width:38px;height: 38px;line-height: 38px;background: #235182;border: 1px #d9d9d9 solid;display: inline-block;text-decoration: none;font-size: 14px;outline: none;'>"+j+"</a></span> ";
}else{
ye=ye+"<a href='javascript:void(0)' onClick='change("+j+")' style='width:38px;height: 38px;line-height: 38px;background: #ffffff;border: 1px #d9d9d9 solid;display: inline-block;text-decoration: none;font-size: 14px;outline: none;'>"+j+"</a> ";
}
}else{
pageContent += "...";
}
}
var pageContent="";
pageContent +='<a href="javascript:void(0);" onClick="change(--pageno)" style=\"margin-left:20px;width:38px;height: 38px;line-height: 38px;background: #ffffff;border: 1px #d9d9d9 solid;display: inline-block;text-decoration: none;font-size: 14px;outline: none;\"><img src="'+contextPath+'/static/index/img/jtarrow3.png" /></a>';
pageContent +='<span id="a3" style=\"margin-left:20px;\">'+ye+'</span>';
pageContent +='<a href="javascript:void(0);" onClick="change(++pageno)"  style=\"margin-left:20px;margin-right:20px;width:38px;height: 38px;line-height: 38px;background: #ffffff;border: 1px #d9d9d9 solid;display: inline-block;text-decoration: none;font-size: 14px;outline: none;\"\"><img src="'+contextPath+'/static/index/img/jtarrow2.png" /></a>';
//pageContent +='第<span id=\"a2\">'+pageno+'</span>/';
//pageContent +='<span id="a1">'+pageall+'</span>页';
$("#page").html(pageContent);
}

到此，此类javaweb异步刷新的问题就解决了，在实际开发中仍有很多可以优化的地方，根据个人需要调整，博主不才，排版很渣，技能很渣，唯有不断摸索，好学若饥，谦卑若愚，我们不止会New。