介绍两种方法JS读取 .JSON 文件【实例演示/源码下载】

.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>

demodownload

执行结果

代码解释

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>

demodownload

执行结果

代码解释

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 文件,两种方法代码都不多,理解和使用起来也不复杂。

您可能对以下文章也感兴趣

  • 表单序列化插件serializeJSON.js下载及使用示例
  • JQuery如何把JSON字符串转为JSON对象