介绍两种方法JS读取 .JSON 文件【实例演示/源码下载】
作者:admin 时间:2022-3-24 21:54:59 浏览:.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>
执行结果
代码解释
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>
执行结果
代码解释
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 文件，两种方法代码都不多，理解和使用起来也不复杂。
您可能对以下文章也感兴趣
标签: JSON
相关文章
x
- 站长推荐
