.JSON
文件的数据结构，是一个字典类型
dict
，不同于csv文件，csv文件，无论你写入的是什么类型的数据结构，读出的始终都是一串串字符。
.JSON
文件本质存储的也是字符串，与csv文件不同的是，
.JSON
读出后是一个
dict
字典类型。因此使用JavaScript打开
.JSON
文件后，要使用解析程序读取文件内容。本文将介绍JS读取
.JSON
文件的两种方法。
假设我们的JSON文件为
data.json
，其内容是：
[
{"name": "Jhon", "age":"25" },
{"name": "Simon", "age":"23" },
{"name": "Jack", "age":"26" }
]
下面要使用JavaScript读取
data.json
的内容，我们有两种方法可以做到这一点。
方法1：使用$.ajax()方法
完整代码是：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax读取json文件</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script>
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "data.json",
success: function (result) {
var str = "";
$.each(result,function(index,obj){
str += "姓名：" + obj["name"] + " 年龄：" + obj["age"] + "<br>";
});
$("#div1").append(str);
}
});
});
</script>
</body>
</html>
demo
download
执行结果
代码解释
1、因为用的是jQuery编程，所以要先引用jQuery库文件。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
2、
type
的值是“
GET
”，不能用
POST
，用
POST
会报错：
405 Method Not Allowed
。
3、
dataType
的值是“
json
”；
url
的值即是json文件地址：
data.json
。
方法2：使用$.getJSON()方法
完整代码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax读取json文件</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script>
$(function(){
$.getJSON("data.json",function(data){
var $result = $("#div1");
var str = "";
$result.empty();
$.each(data,function(index,info){
str += "姓名：" + info["name"] + " 年龄：" + info["age"] + "</br>";
})
$result.html(str);
})
})
</script>
</body>
</html>
demo
download
执行结果
代码解释
1、
$.getJSON()
方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
2、
$.getJSON()
用的是jQuery编程，所以需要先引用jQuery库文件。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
3、语法：
$.getJSON(url,function(data){})
，
url
可以是网络地址，也可以是本地文件，本示例
url
的值是本地文件：
data.json
。
总结
本文介绍了两种方法JS读取
.JSON
文件，两种方法代码都不多，理解和使用起来也不复杂。
您可能对以下文章也感兴趣
