购物商城左侧导航栏加载问题

左侧导航栏部分

问题

通过Ajax请求后台数据实现异步加载左侧导航条但是每次点击左侧导航条都会一闪一下导致用户体验不佳

$.ajax({
                url: "${pageContext.request.contextPath}/goodsServlet/findTopGood",
                type: "get",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    // alert(data.objectMap.kindList);
                    var kindList = data.objectMap.kindList;
                    // alert(kindList.length)
                    var total = kindList.length;
                    for (var i = 0; i < total; i++) {
                        $("#kindid").html(kindList[i].good_kind_name)
                        // alert(kindList[i].good_kind_id)
                        var $li = $("<li>").addClass("list-group-item");
                        var $a = $("<a>").attr("href", "${pageContext.request.contextPath}/goodsServlet/findsigleGood?pid=" + kindList[i].good_kind_id).text(kindList[i].good_kind_name);
                        $li.append($a)
                        $("#left_car_nav").append($li);
                    }

                }
            })

 前台导航栏代码：

  <ul class="list-group" id="left_car_nav">

 后台代码：  

    @RequestMapping(value = "/findTopGood")
@ResponseBody
public ResponseMessage findTopGood(){
  //        ResponseMessage responseMessage = new ResponseMessage();
    Map<Integer,GoodKind> goodMap = new HashMap<>();
    List<GoodKind> allKind = goodsService.findTopGood();
    for (GoodKind goodKind : allKind) {
        System.out.println(goodKind);
        goodMap.put(goodKind.getId(),goodKind);
    }
    //  ResponseMessage responseMessage2 = responseMessage.success().addObject("kindMap",                 goodMap).addObject("kindList", allKind);
 //        httpSession.setAttribute("ResponseMessage1",responseMessage2);
    return ResponseMessage.success().addObject("kindMap", goodMap).addObject("kindList", allKind);
}

----------------------------------------------------------------------------------------------

解决方案

在session域中同时存储左侧导航栏的一级目录一级中间部分一级目录对应的所有商品,然后利用JSTL标签库以及EL表达式用forEach加载数据

 前台代码：

    <ul class="list-group" id="left_car_nav">
         <c:forEach var="goods" items="${sessionScope.ResponseMessage.objectMap.kindList}" step="1">
            <li class="list-group-item">
                <a href="${pageContext.request.contextPath}/goodsServlet/findsigleGood?pid=${goods.good_kind_id}">${goods.good_kind_name}</a></li>
                <%--<a href="${pageContext.request.contextPath}/goodsServlet/findsigleGood?pid=A102">${sessionScope.ResponseMessage1.objectMap.kindList.good_kind_name}</a>--%>
                <%--</li>--%>
   </c:forEach>
       <ul>

   后台代码：

 @RequestMapping(value = "/findsigleGood",params ="pid")
public String findSingleGood(@RequestParam String pid,HttpSession httpSession){
    ResponseMessage responseMessage = new ResponseMessage();
    Map<Integer,GoodMsg> goodMap = new HashMap<>();
    Map<Integer,GoodKind> kindMap = new HashMap<>();

    List<GoodMsg> allGood = goodsService.findSingleGood(pid);
    List<GoodKind> topGood = goodsService.findTopGood();
    for (GoodMsg goodMsg : allGood) {
        System.out.println(goodMsg);
        goodMap.put(goodMsg.getId(),goodMsg);
    }
    for (GoodKind goodKind : topGood) {
        kindMap.put(goodKind.getId(),goodKind);
    }
    ResponseMessage responseMessage1 = responseMessage.success().addObject("goodMap", goodMap).addObject("goodList", allGood).addObject("kindList",topGood);
   //同时添加以及目录一级一级目录对应的商品
   //goodList存放商品
   //kindList存放目录
    httpSession.setAttribute("ResponseMessage",responseMessage1);
    return "ShowGoods";
}

 service方法以及Mapper方法省略.......