html读取json文件+数据渲染

2023-11-11

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title id="title"></title>
		<script type="text/javascript" src="../../js/jquery.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/bootstrap.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		 crossorigin="anonymous"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
		 crossorigin="anonymous">
		 <!-- 手写css -->
		<link rel="stylesheet" type="text/css" href="../../css/IntelligentManagement.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mycss.css"/>
	</head>
	<body>
		<div id="background"></div>
			<div id="main" style="z-index: 1;">
				<div class="DeviceManagement_title"></div>
				<div class="detailList"></div>
				<!-- <a href="../FirstLevel/IntelligentManagementDetailPage.html"><img src="../../img/backup.png" class="backupStyle"/></a> -->
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	window.onload = function(){
			var myURL = new URL(window.location);
			var searchParams = new URLSearchParams(myURL.search);
			var parm = searchParams.get('id');
		  	switch(parm){
		  		case "1":/* 安全管理 */
		  			$.getJSON("../../json/SecondLevelPage.json", function (data){
		  			        var con= data.aqgl.resultData
		  			        var html="";
		  					var title = data.aqgl.title;/* 需要初始化 */
		  			        $.each(con, function(k,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
		  			            html+='<li class="secondNavigationBox">'+ 
		  			                    	'<a href='+'"'+con[k].url+'"'+' class="secondNavigationURL">' + con[k].urlName + '</a>'+
		  			               	'</li>'
		  			        });
		  			        $(".detailList").append(html);/* 内容 */
		  					$("#main").append('<a href='+'"'+data.aqgl.backUrl+'"'+' class="secondNavigationURL">' + '<img src="../../img/backup.png" class="backupStyle"/></a>');/* 内容 */
		  			 		$(".DeviceManagement_title").html(title);/* 内容 */
		  					// $("#detailTitle").html(title);/* 标题 */
		  					$("#title")[0].innerHTML=title;/* 页面名称 */
		  			    });
		  			break;
		  		default:
		  			break;
		  	}
		};
</script>

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html读取json文件+数据渲染 的相关文章

随机推荐