利用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 相关文章推荐
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
用js编写留言板
Mar 17 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
微信小程序开发背景图显示功能
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中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python正则表达式完全指南
2017/05/25 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
详解python UDP 编程
2020/08/24 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
家长会演讲稿
2014/04/26 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
医学生求职信
2014/07/01 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
投诉信格式范文
2015/07/02 职场文书
运动会加油稿50字
2015/07/21 职场文书
安全教育培训制度
2015/08/06 职场文书