如何在javascript中读取本地的json格式文本文件

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在javascript中读取本地的json格式文本文件相关的知识，希望对你有一定的参考价值。

本地有个吧数据按json格式写好的文本文件
我想在javascript脚本中读取这个文本文件的内容，并转换成一个json格式的变量
怎么办?

g.loadScript = function (uri, cb, charset) //load 单个请求
var _script = document.createElement("script");
_script.type = "text/javascript";
_script.charset = charset || "utf-8";
_script._fun = typeof cb != "undefined" ? cb : new Function();
_script[document.all ? "onreadystatechange" : "onload"] = function ()
if (document.all && this.readyState != "loaded" && this.readyState != "complete") return;
this._fun(this);
this._fun = null;
this[document.all ? "onreadystatechange" : "onload"] = null;
var _t = this;
_t.parentNode.removeChild(_t);
;
_script.src = uri;
document.getElementsByTagName("head").item(0).appendChild(_script);
;

loadScript(url,function()console.log(json),"utf-8")//把你的文本文件换成HTML，url是html地址，json是你的json变量的变量名。jsonp格式获取。参考技术A 首先Javascript是不能访问客户端（即浏览器端）的本地资源的，你说的这个文件是不是在服务器端上的？参考技术B 用jquery提供的函数最简单有效：$.getJSON("abc.json",function(data)
//data就是json对象了，不需要在转换
);本回答被提问者和网友采纳参考技术C 只能用后台JSP或者PHP等语言来读取转换。谢谢

jQuery中读取本地json文件

jquery解析JSON

例子一：

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你

$.getJSON(url,[data],[callback])

url：加载的页面地址
data: 可选项，发送到服务器的数据，格式是key/value
callback:可选项，加载成功后执行的回调函数

目录结构：

1.首先建一个JSON格式的文件userinfo.json 保存用户信息。

如下:

[
  {
    "name":"张国立",
    "sex":"男",
    "email":"zhangguoli@123.com"
  },
  {
    "name":"张铁林",
    "sex":"男",
    "email":"zhangtieli@123.com"
  },
  {
    "name":"邓婕",
    "sex":"女",
    "email":"zhenjie@123.com"
  }
]

2.其次建一个getUserinfo.html页面用于获取JSON文件里的用户信息数据，并显示

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON获取数据</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <style type="text/css">
        #divframe {
            border: 1px solid #999;
            width: 500px;
            margin: 0 auto;
        }

        .loadTitle {
            background: #CCC;
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.getJSON("js/userinfo.json", function (data) {
                    var $jsontip = $("#jsonTip");
                    var strHtml = "读取的数据：<br/>";//存储数据的变量
                    $jsontip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        strHtml += "姓名：" + info["name"] + "<br>";
                        strHtml += "性别：" + info["sex"] + "<br>";
                        strHtml += "邮箱：" + info["email"] + "<br>";
                        strHtml += "<hr>"
                    })
                    $jsontip.html(strHtml);//显示处理后的数据
                })
            })

        })
    </script>
</head>
<body>
<div id="divframe">
    <div class="loadTitle">
        <input type="button" value="获取数据" id="btn"/>
    </div>
    <div id="jsonTip">
    </div>
</div>
</body>
</html>

3.【运行】效果图：

用浏览器打开getUserinfo.html文件，显示

参考：

jQuery中读取json文件示例代码

使用jQuery解析JSON数据

2.例子二

1.json文件：test.json

[
  {
    "id": 1,
    "uname":"andy",
    "unumber": 1,
    "courseInfos": [
      {
        "id": 1,
        "cname": "数学",
        "caddress": "1号楼"
      },
      {
        "id": 3,
        "cname": "英语",
        "caddress": "外教楼"
      }
    ]
  },
  {
    "id": 2,
    "uname": "zty",
    "unumber": 2,
    "courseInfos": [
      {
        "id": 2,
        "cname": "化学",
        "caddress": "综合楼"
      },
      {
        "id": 3,
        "cname": "英语",
        "caddress": "外教楼"
      }
    ]
  },
  {
    "id": 3,
    "uname": "巩希波",
    "unumber": 3,
    "courseInfos": []
  },
  {
    "id": 5,
    "uname": "xiaoming",
    "unumber": 4,
    "courseInfos": []
  }
]

2.读取json文件的getUserInfor2.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON获取数据</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <style type="text/css">
        #divframe {
            border: 1px solid #999;
            width: 500px;
            margin: 0 auto;
        }

        .loadTitle {
            background: #CCC;
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.getJSON("test.json", function (data) {
                    var $jsontip = $("#jsonTip");
                    var strHtml = "读取的数据：<br/>";//存储数据的变量
                    $jsontip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        strHtml += "姓名：" + info["uname"] + "<br>";
                        strHtml += "id：" + info["id"] + "<br>";
                        var infos = info["courseInfos"];
                        $.each(infos, function (hehe, info2) {
                            strHtml += "科目：" + info2["cname"] + "<br>";
                            strHtml += "教学楼：" + info2["caddress"] + "<br>";
                            strHtml += "<hr>"
                        })
                    })
                    $jsontip.html(strHtml);//显示处理后的数据
                })
            })

        })
    </script>
</head>
<body>
<div id="divframe">
    <div class="loadTitle">
        <input type="button" value="获取数据" id="btn"/>
    </div>
    <div id="jsonTip">
    </div>
</div>
</body>
</html>

3.用浏览器打开，查看效果图：

以上是关于如何在javascript中读取本地的json格式文本文件的主要内容，如果未能解决你的问题，请参考以下文章

从 Javascript 页面保存 JSON 数据

本地文件访问json数据格式，在chrome中没反应

php，JavaScript 如何读取并修改json文件?

js怎么加载&解析json文件,原生的

GoLang -- json文件操作

Android 如何引用本地json文件