前期准备:
一、ajax(XMLHttpRequest):
// index.json文件
{
"data": {
"list": [
{"name": "数据表1", "id": "1"},
{"name": "数据表2", "id": "2"},
{"name": "数据表3", "id": "3"}
]
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加载json</title>
</head>
<body>
</body>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 当满足返回第四阶段和状态码为200时执行
var json = JSON.parse(this.responseText); //转换读取到的文件内容为json格式
console.log(json);
}
}
xmlhttp.open('GET', '/index.json'); // 导入JSON文件
xmlhttp.send();
</script>
</html>
这里采用的是js里ajax的异步加载,创建XMLHttpRequest参数之后通过这个属性读取json文件,最后使用JSON.parse把读取到的JSON文件转化为json数据通过控制台输出。
二、$.ajax()(Jquery)加载:
// 推荐cdn地址
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加载json</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
</body>
<script>
$.ajax({
method: "GET", // 设置请求方式为GET
url: "/index.json", // 加载本地json文件
dataType: "json", // 设置数据类型为json
success: function(e){
console.log(e); // 输出结果
}
})
</script>
</html>
三、$.getJSON()(jquery)加载:
html代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加载json</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
</body>
<script>
$.getJSON("/index.json", function(e){
console.log(e);
})
</script>
</html>
那么我们写了这么多导入JSON的方法,那如何将数据显示出来呢?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加载json</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
.here { /* 修饰div样式*/
width: 1000px;
height: 500px;
background: #00ffff;
margin: 100px auto;
}
</style>
<div class="here"></div> <!-- 我们将数据显示到这里 -->
</body>
<script>
var box = document.getElementsByClassName('here')[0]; //获取div盒子属性
var list = ''; // 设置空参数用来接收循环里输出的内容
$.ajax({
method: "GET",
url: "/index.json",
dataType: "json",
success: function(e){
let data = e.data.list; // 读取数据到数组下
for(let i=0; i<data.length; i++){ // 遍历数组读取数据
list += 'id是: ' + data[i].id + ', 名字是: ' + data[i].name + "<br>"; //将读取到的数据写入开始设置的空参数里
}
box.innerHTML = list; // 将数据输出到html界面
}
})
</script>
</html>
原文地址:https://blog.csdn.net/qq_61339022/article/details/128441228
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_24276.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。