利用js將ajax獲取到的后臺(tái)數(shù)據(jù)動(dòng)態(tài)加載至網(wǎng)頁(yè)中的方法
動(dòng)態(tài)生成二級(jí)菜單樹(shù):
<script> jQuery(function($) { /********** 獲取未處理報(bào)警信息總數(shù) **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//訪問(wèn)后臺(tái)接口取數(shù)據(jù) // dataType : "json", type: 'POST', success: function(data){ result = eval('('+ data +')'); } }); var alarmCount; alarmCount = result.total; /********** 靜態(tài)代碼形式 **********/ /* <li> <a href="#" rel="external nofollow" class="dropdown-toggle"> <i class="icon-desktop"></i> <span class="menu-text"> 設(shè)備管理 </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> 標(biāo)簽打印機(jī)管理 </a> </li> </ul> </li> */ /*****從后臺(tái)取出導(dǎo)航欄數(shù)據(jù)******/ $.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 = []; /******一級(jí)導(dǎo)航欄數(shù)據(jù)*******/ for (var i = 0; i < result.length; i++){ firstMenu[i] = result[i].name; firstHref[i] = result[i].url; firstIcon[i] = result[i].iconCls; /*******添加li標(biāo)簽********/ var menuInfo = document.getElementById("menuInfo"); var firstLi = document.createElement("li");//創(chuàng)建新的 li元素 menuInfo.appendChild(firstLi);//將此li元素添加至頁(yè)面的ul下一級(jí)中 firstLi.style.borderBottom = "0px solid #CCEBF8";//設(shè)置li下邊框樣式 /******設(shè)置選中l(wèi)i、離開(kāi)li時(shí)li的樣式********/ firstLi.onmouseover = function(){ this.style.background = "#23ACFA"; }; /* firstLi.onmouseover = function(){ this.style.background = "#23ACFA"; }; */ firstLi.onmouseout=function(){ this.style.background = "#0477C0"; }; /******添加a標(biāo)簽**********/ var firstALabel = document.createElement("a"); firstALabel.setAttribute("href", firstHref[i]);//js為新添加的a元素動(dòng)態(tài)設(shè)置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元素動(dòng)態(tài)設(shè)置背景顏色 // background:url(./img/17.jpg); firstALabel.style.marginLeft = "20px";//js為新添加的a元素動(dòng)態(tài)設(shè)置左外邊距 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標(biāo)簽*******/ var firstILavel = document.createElement("i"); firstILavel.setAttribute("class", firstIcon[i]); firstILavel.style.color = "#F4F8FF";//動(dòng)態(tài)設(shè)置i元素的顏色 firstALabel.appendChild(firstILavel); /*********添加span標(biāo)簽**********/ var firstSpan = document.createElement("span"); firstSpan.className = "menu-text"; firstSpan.innerHTML = firstMenu[i];//js為新添加的span元素動(dòng)態(tài)設(shè)置顯示內(nèi)容 firstSpan.style.fontSize = "14.5px";//js為新添加的span元素動(dòng)態(tài)設(shè)置顯示內(nèi)容的字體大小 firstSpan.style.color = "#66D2F1";//js為新添加的span元素動(dòng)態(tài)設(shè)置顯示內(nèi)容的字體顏色 firstSpan.style.marginLeft = "15px"; firstALabel.appendChild(firstSpan); if (firstMenu[i] == "報(bào)警信息管理"){ var alarmIcon = document.createElement("span"); alarmIcon.className = "badge badge-important"; alarmIcon.innerHTML = alarmCount; //alarmCount為全局變量,且是通過(guò)ajax從后臺(tái)獲取到的 firstSpan.appendChild(alarmIcon); } if (result[i].children.length > 0){ var secondHref = []; var secondMenu = []; var secondIcon = []; /*******添加b標(biāo)簽********/ var firstBLabel = document.createElement("b"); firstBLabel.className = "arrow icon-angle-down"; firstBLabel.style.color = "white"; firstALabel.appendChild(firstBLabel); /********添加ul標(biāo)簽************/ 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標(biāo)簽*******/ var secondLi = document.createElement("li"); secondLi.style.background = "#CCEBF8"; secondUl.appendChild(secondLi); /*******添加a標(biāo)簽*******/ var secondALabel = document.createElement("a"); secondALabel.setAttribute("href", secondHref[j]); secondALabel.setAttribute("target", "content"); //secondALabel.style.background = "#CCEBF8"; secondLi.appendChild(secondALabel); /*******添加i標(biāo)簽**********/ var secondILabel = document.createElement("i"); secondILabel.setAttribute("class", "icon-double-angle-right"); secondALabel.appendChild(secondILabel); /******添加二級(jí)導(dǎo)航信息********/ secondALabel.innerHTML = secondMenu[j]; secondALabel.style.fontSize = "15px"; //secondALabel.style.marginLeft = "60px"; } } } } }, error: function() { alert("加載菜單失敗"); } }); }) </script>
靜態(tài)生成菜單樹(shù)的代碼:
生成菜單樹(shù)的效果:
以上這篇利用js將ajax獲取到的后臺(tái)數(shù)據(jù)動(dòng)態(tài)加載至網(wǎng)頁(yè)中的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- javascript實(shí)現(xiàn)簡(jiǎn)單的可隨機(jī)變色網(wǎng)頁(yè)計(jì)算器示例
- 原生JS實(shí)現(xiàn)網(wǎng)頁(yè)手機(jī)音樂(lè)播放器 歌詞同步播放的示例
- JS腳本實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)秒殺點(diǎn)擊
- Javascript網(wǎng)頁(yè)搶紅包外掛實(shí)現(xiàn)分享
- js實(shí)現(xiàn)關(guān)閉網(wǎng)頁(yè)出現(xiàn)是否離開(kāi)提示
- VueJs單頁(yè)應(yīng)用實(shí)現(xiàn)微信網(wǎng)頁(yè)授權(quán)及微信分享功能示例
- Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
- javascript網(wǎng)頁(yè)隨機(jī)點(diǎn)名實(shí)現(xiàn)過(guò)程解析
相關(guān)文章
JS 獲取瀏覽器和屏幕寬高等信息的實(shí)現(xiàn)思路及代碼
本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性,附實(shí)現(xiàn)代碼及源程序解決,有需求的朋友可以參考下2013-07-07JS日期格式化之javascript Date format
這篇文章主要介紹了JS日期格式化之javascript Date format的相關(guān)資料,需要的朋友可以參考下2015-10-10Bootstrapvalidator校驗(yàn)、校驗(yàn)清除重置的實(shí)現(xiàn)代碼(推薦)
這篇文章給大家介紹了bootstrapvalidator校驗(yàn)、校驗(yàn)清除重置的實(shí)現(xiàn)代碼,在代碼中需要我們引入css與js文件,大家可以參考下文的代碼2016-09-09JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼
JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼廢話少說(shuō),直接貼代碼!有注釋2012-10-10Javascript動(dòng)態(tài)伸縮+淡出淡入
一種不錯(cuò)代碼應(yīng)用實(shí)例,大家可以根據(jù)這個(gè)代碼,拓寬出更好的代碼2009-02-02javascript字符串對(duì)象常用api函數(shù)小結(jié)(連接,替換,分割,轉(zhuǎn)換等)
這篇文章主要介紹了javascript字符串對(duì)象常用api函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript常用的連接、替換、分割、轉(zhuǎn)換等相關(guān)函數(shù)與使用方法,需要的朋友可以參考下2016-09-09Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序...2006-11-11JavaScript正則替換HTML標(biāo)簽功能示例
這篇文章主要介紹了JavaScript正則替換HTML標(biāo)簽功能,結(jié)合完整實(shí)例形式詳細(xì)分析了javascript正則替換字符串操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03