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

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

·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';

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