對於搞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代碼就是將后台返回來的數據，原樣拼接到指定位置處的，記住，它是按照靜態文件中的代碼原樣拼接的，我也是拼接了好幾回，建議大家根據瀏覽器開發者工具，打開原生的靜態文件對比拼接速度更快，還不容易出錯。
好了，寫到這兒，我也不多說什么了，主要就是記錄下這次的編碼過程。