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


Posted in Javascript onAugust 08, 2018

动态生成二级菜单树:

<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>

静态生成菜单树的代码:

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

生成菜单树的效果:

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

以上这篇利用js将ajax获取到的后台数据动态加载至网页中的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
微信小程序开发背景图显示功能
Aug 08 #Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 #Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 #Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 #Javascript
详解如何在vue-cli中使用vuex
Aug 07 #Javascript
React styled-components设置组件属性的方法
Aug 07 #Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
You might like
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
smarty内置函数section的用法
2015/01/22 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
img的onload的另类用法
2008/01/10 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
对python多线程与global变量详解
2018/11/09 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Python tornado上传文件的功能
2020/03/26 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
创业计划书六个要素
2013/12/26 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
党校学习自我鉴定
2014/02/24 职场文书
学生会主席演讲稿
2014/04/25 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2019新员工心得体会
2019/06/25 职场文书