提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
html文件读取json文件并打印在控制台。
一、下载jquery.js
复制网址到浏览器:https://code.jquery.com/jquery-3.6.0.min.js,右键"另存为"保存到自定义路径。
二、使用步骤
1.准备json文件
本地json文件如下(示例):
{"device":[
{ "name": "温度传感器" , "type" : "sensor"},
{ "name": "PH检测器" , "type" : "detector"},
{ "name": "湿度传感器" , "type" : "sensor" }
],
"edges":[
{ "source": 0 , "target": 1 , "relation":"前置设备" },
{ "source": 0 , "target": 2 , "relation":"联合设备" },
{ "source": 0 , "target": 3 , "relation":"后置设备" }
]
}
2.引入库并使用函数ajax请求本地json文件
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新手控制台打印json</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="getJson()">读取JSON</button>
<script>
function getJson(){
$.ajax({
type:"get",
url:"equip.json",
async:false,
dataType:'json',
success:function(data){
console.log(data);
},
error:function(){
alert("读取失败");
}
});
}
</script>
</body>
</html>
点击按钮,效果如下图: