The Java web reads menus from the database and displays them in the 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: ' PO St ', DataType: ' JSON ', Data:{username: '},Async:false,
Success:function (data) {$ ("#main_menu"). empty (); $ ("#main_menu"). Append ("<li class= ' Nav-header ' > main Menu </li ><li class= ' accordion ' ><a class= ' ajax-link ' href= ' jsp/mainview.jsp ' ><svg ' the class= ' icon ' Aria-hidden = ' true ' ><use xlink:href= ' #icon-brush_fill ' ></use></svg><span> home </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>

When obtaining data using the $ (function () {$.ajax ({})}), because the execution order of this method is executed after the JSP page is loaded completely, sometimes because the request menu and JS file loading order, cause the menu to display or click on the problem, the solution is: will be $. The Ajax request method is changed from asynchronous to synchronous, that is, the Async:false makes the menu load precede the related JS.