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);
                            },
                            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。