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。