利用js将ajax获取到的后台数据动态加载至网页中的方法

<script>
jquery(function($) {
/**********
获取未处理报警信息总数
**************/
var result;
$.ajax({
async:false,
cache:false,
url: "alarm_findpagealarm.do",//访问后台接口取数据
// datatype : "json",
type: 'post',
success: function(data){
result = eval('('+ data +')');
}
});
var alarmcount;
alarmcount = result.total;

/**********

静态代码形式

**********/
/* 
<li>
<a href="#" rel="external nofollow" class="dropdown-toggle">
<i class="icon-desktop"></i>
<span class="menu-text"> 设备管理 </span>


<b class="arrow icon-angle-down"></b>
</a>


<ul class="submenu">
<li>
<a href="smartterminal.html" rel="external nofollow" >
<i class="icon-double-angle-right"></i>
智能终端管理
</a>
</li>
<li>
<a href="labelprinter.html" rel="external nofollow" >
<i class="icon-double-angle-right"></i>
标签打印机管理
</a>
</li>
</ul>
</li>
*/

/*****从后台取出导航栏数据******/
$.ajax({
async:true,
cache:false,
url: "user_getmenubuf.do",
// datatype : "json",
type: 'post',
success: function(result){
var result = eval('('+ result +')');
if(result != undefined && result.length > 0){
var firstmenu = [];
var firsthref = [];
var firsticon = [];
var submenu = [];

/******一级导航栏数据*******/
for (var i = 0; i < result.length; i++){
firstmenu[i] = result[i].name;
firsthref[i] = result[i].url;
firsticon[i] = result[i].iconcls;

/*******添加li标签********/
var menuinfo = document.getelementbyid("menuinfo");
var firstli = document.createelement("li");//创建新的 li元素
menuinfo.appendchild(firstli);//将此li元素添加至页面的ul下一级中
firstli.style.borderbottom = "0px solid #ccebf8";//设置li下边框样式

/******设置选中li、离开li时li的样式********/
firstli.onmouseover = function(){
this.style.background = "#23acfa";
};
/* firstli.onmouseover = function(){
this.style.background = "#23acfa";
}; */
firstli.onmouseout=function(){
this.style.background = "#0477c0";
};

/******添加a标签**********/
var firstalabel = document.createelement("a");
firstalabel.setattribute("href", firsthref[i]);//js为新添加的a元素动态设置href属性
firstalabel.setattribute("class", "dropdown-toggle");
//firstalabel.classname = "dropdown-toggle";//兼容性好
firstalabel.setattribute("target", "content");
//firstalabel.style.backgroundimage="url(./img/17.jpg)"
firstalabel.style.background = "#0477c0";//js为新添加的a元素动态设置背景颜色
// background:url(./img/17.jpg);
firstalabel.style.marginleft = "20px";//js为新添加的a元素动态设置左外边距
firstli.appendchild(firstalabel);
firstalabel.onmouseover = function(){
this.style.background = "#23acfa";
};
/* firstalabel.onmouseover = function(){
this.style.background = "#23acfa";
}; */
firstalabel.onmouseout=function(){
this.style.background = "#0477c0";
};


/*******添加i标签*******/
var firstilavel = document.createelement("i");
firstilavel.setattribute("class", firsticon[i]);
firstilavel.style.color = "#f4f8ff";//动态设置i元素的颜色
firstalabel.appendchild(firstilavel);

/*********添加span标签**********/
var firstspan = document.createelement("span");
firstspan.classname = "menu-text";
firstspan.innerhtml = firstmenu[i];//js为新添加的span元素动态设置显示内容
firstspan.style.fontsize = "14.5px";//js为新添加的span元素动态设置显示内容的字体大小
firstspan.style.color = "#66d2f1";//js为新添加的span元素动态设置显示内容的字体颜色
firstspan.style.marginleft = "15px";
firstalabel.appendchild(firstspan);

if (firstmenu[i] == "报警信息管理"){
var alarmicon = document.createelement("span");
alarmicon.classname = "badge badge-important";
alarmicon.innerhtml = alarmcount; //alarmcount为全局变量，且是通过ajax从后台获取到的
firstspan.appendchild(alarmicon);
}

if (result[i].children.length > 0){
var secondhref = [];
var secondmenu = [];
var secondicon = [];

/*******添加b标签********/
var firstblabel = document.createelement("b");
firstblabel.classname = "arrow icon-angle-down";
firstblabel.style.color = "white";
firstalabel.appendchild(firstblabel);

/********添加ul标签************/
var secondul = document.createelement("ul");
secondul.setattribute("class", "submenu");
firstli.appendchild(secondul);

for (var j = 0; j < result[i].children.length; j++){
secondhref[j] = result[i].children[j].url;
secondmenu[j] = result[i].children[j].name;
secondicon[j] = result[i].children[j].iconcls;

/******添加li标签*******/
var secondli = document.createelement("li");
secondli.style.background = "#ccebf8";
secondul.appendchild(secondli);

/*******添加a标签*******/
var secondalabel = document.createelement("a");
secondalabel.setattribute("href", secondhref[j]);
secondalabel.setattribute("target", "content");
//secondalabel.style.background = "#ccebf8";
secondli.appendchild(secondalabel);

/*******添加i标签**********/
var secondilabel = document.createelement("i");
secondilabel.setattribute("class", "icon-double-angle-right");
secondalabel.appendchild(secondilabel);

/******添加二级导航信息********/
secondalabel.innerhtml = secondmenu[j];
secondalabel.style.fontsize = "15px";
//secondalabel.style.marginleft = "60px";
}
}
}
   }
  }, 
 error: function() { 
 alert("加载菜单失败"); 
 } 
});
})
</script>