如何用js读取本地json

　　因为做一个项目还没部署到服务器上时，需要用本地数据测试前端代码，于是就在想如何用js读取本地的json文件。

　　在中文互联网找了一圈，方法没一个有参考价值。于是去英文互联网找了一圈，在*上找到了这个问题。这里不得不说还是*上问题比较多，我这种英文水平都能找到相同关键词的问题。*上的解答很多，都蛮靠谱的。这里记录几个比较有建设性的方法。

·1. 建立本地的webserver

　　这个方法应该是最根本的解决方法了，但由于我时间有限（明天就是DDL了），所以没有考虑，但从长期来看这个方法应该是最优解。

　　但看了下这个回答下的讨论，由于我对AJAX和HTTP那块也不熟，所以就不多阐述了。

2. 在.html文件里直接读取json文件为js，记为一个全局变量

　　把json文件改写为

data = \'你原来的json\';

　　这个方法很取巧（或者说很不讲规范）在html文件里加入

1 <script type="text/javascript" src="data.json"></script>
2 <script type="text/javascript" src="javascrip.js"></script>

　　最后在你的js里把data当作一个全局变量直接JSON.parse(data)就可以了。

　　这个方法应该是最接近我想要的形式的解答，但实在是太不规范了，只有我平时一个人这样测试时才能用。

3. 提供了一个读取本地文件的回调函数

　　我才接触js对js回调函数这块还不是很明白，直接贴代码吧

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

　　上面是Chrome的报错，这个方法在Chrome里是无法使用的，我电脑上测试都是在Chrome上做的，换其他浏览器害怕有其他问题，遂作罢。

4. 最后解决方案

　　想了半天，因为json是不变的，所以干脆就加了一个

var jData = \'我的json\';

　　虽然不够美观，但至少问题简单的解决了。

秒客网

如何用js读取本地json

相关文章