后台模板管理系统___左侧菜单数据的异步加载

　对于搞Java的我来说，前端JS我是有点愚冻，今天在我的博客地盘我就悄悄发布一篇没有技术含量的文章，这次怎么说我也是完完整整的把公司后台管理系统的菜单异步加载独自搞出来了，对自己也是一个小小的提升，话不多说开始写步骤。

　　同志们都知道，后台系统嘛无非就是一套模板样式，分为头文件，左侧菜单和主体内容，在多了就加个页脚文件。但是为了提升系统的性能，很多公司都习惯将系统的目录数据放在缓存，然后通过异步请求的方式单独加载出来，我们公司也不例外。

　　首先系统欢迎页面中包含左侧菜单jsp文件，代码如下：

1 <!-- 左侧菜单栏开始  -->
2 <%@ include file="/modules/nav.jsp"%>

其次左侧菜单jsp文件中通常会加载一个js文件，因为系统的目录数据一般是通过js文件中的js代码发送请求，来将获取到的数据拼接到页面指定位置上去的，代码如下：

1 <%@ page contentType="text/html;charset=utf-8" %>
2 <%@ include file="/commons/taglibs.jsp"%>
3 <script>
4 var contextPath="${pageContext['request'].contextPath}";
5 </script>
6     <ul id="leftnav" class="leftnav">
7         
8     </ul>
9 <script src="${zxz}/js/nav.js?version=1.0"></script>

　最后，就是幕后黑手出场，饶了小半圈儿就是js文件加载目录数据的，不多解释，今儿心情好，代码原样粘贴：

 1 $(function(){
 2     //获取左侧菜单
 3     var url = contextPath + '/ajax/listMenu.json';　　　　　　　　　　//末尾的.json代表后台返回的数据是json格式的数据，但是也可以用dataType属性来定义
 4     var nav_html = '';
 5     var header_html = '';
 6     $.ajax({
 7         cache: false,
 8         type: "post",
 9         url: url,
10         //dataType:"json",  //返回的数据类型[也可以在上面请求的地址后面直接加上".json"]
11         error: function() {
12             massage_info_fail("系统异常");
13         },
14         success: function(data) {
15             console.log(data);
16             $.each(data,function(idx,item){
17                 nav_html += "<li class='manage'><label><i class='iconfont'>"+item.menuIcon+"</i>"+item.menuName+"</label><ul id='"+item.id+"'>";
18                 if(item.children!=null && item.children!=""){
19                 $.each(item.children,function(idx2,itemchildren){
20                     nav_html += "<li id="+itemchildren.mid+"><a href='"+contextPath+itemchildren.menuURL+"'>"+itemchildren.menuName+"</a></li>"
21                  });
22                 }
23                 nav_html += "</ul>";
24             });
25             $("#leftnav").html(nav_html);
26             //根据右侧菜单标识改变左侧导航菜单的展开与选中[根据页面的隐藏传递的mid属性展开左侧菜单栏中的对应菜单项]
27             if($(".main input[name='mid']").size()>0){
28                 var mid = $(".main input[name='mid']").val();
29                 if(mid != '' || mid.length > 0){
30                     $("#"+mid+"").addClass("curr");
31                     $("#"+mid+"").parents("li").addClass("curr");
32                 }
33             }
34         }
35         
36     });
37 });

上面那段加红的js代码就是将后台返回来的数据，原样拼接到指定位置处的，记住，它是按照静态文件中的代码原样拼接的，我也是拼接了好几回，建议大家根据浏览器开发者工具，打开原生的静态文件对比拼接速度更快，还不容易出错。

　　好了，写到这儿，我也不多说什么了，主要就是记录下这次的编码过程。