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

2018-01-02 19:05:32来源:CSDN作者:ff906317011人点击

分享

博主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。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台