Java web 从数据库读取菜单，显示在jsp中

<div class="col-md-2">      <div class="sidebar-nav">        <div class="nav-canvas">          <ul class="nav nav-pills nav-stacked main-menu" id="main_menu">                     </ul>        </div>      </div>    </div>  <script type="text/javascript">  $(function(){ $.ajax({url:'GetMenu',type:'post',dataType:'json',data:{userName:''},async:false,success:function(data){$("#main_menu").empty();$("#main_menu").append("<li class='nav-header'>主菜单</li><li class='accordion'><a class='ajax-link' href='jsp/Mainview.jsp'><svg class='icon' aria-hidden='true'><use xlink:href='#icon-brush_fill'></use></svg><span>首页</span></a></li>");$.each(data,function(i,val) {         if(val["level"]==1){               var htm="<li class='accordion'><a href='#'>";               htm+="<i class='glyphicon glyphicon-home'></i>"+val['menuName']+"</a>";               htm+="<ul class='nav nav-pills nav-stacked' id="+val['menuId']+">";                                               htm+="</ul></li>";                                  $("#main_menu").append(htm);                 }             });  $.each(data,function(index,value){if(value["level"]==2){                 var ht="<li id="+value['menuId']+"><a href="+value['menuUrl']+" ><i class='glyphicon glyphicon-save'></i>"+value['menuName']+"</a></li>                          $("#"+value['parentId']).append(ht);  }});  }});  });  </script>

在使用$(function(){$.ajax({})})获取数据时，因为该方法的执行顺序是在jsp页面完全加载后执行的，所以有时候会因为请求的菜单与js文件的加载顺序，导致菜单显示或点击时出现问题，解决的方法是：将$.ajax的请求方式由异步改成同步，即async:false使得菜单的加载先于相关js。