如何用js讀取本地json

　　因為做一個項目還沒部署到服務器上時，需要用本地數據測試前端代碼，於是就在想如何用js讀取本地的json文件。

　　在中文互聯網找了一圈，方法沒一個有參考價值。於是去英文互聯網找了一圈，在StackOverflow上找到了這個問題。這里不得不說還是StackOverflow上問題比較多，我這種英文水平都能找到相同關鍵詞的問題。StackOverflow上的解答很多，都蠻靠譜的。這里記錄幾個比較有建設性的方法。

·1. 建立本地的webserver

　　這個方法應該是最根本的解決方法了，但由於我時間有限（明天就是DDL了），所以沒有考慮，但從長期來看這個方法應該是最優解。

　　但看了下這個回答下的討論，由於我對AJAX和HTTP那塊也不熟，所以就不多闡述了。

2. 在.html文件里直接讀取json文件為js，記為一個全局變量

　　把json文件改寫為

data = '你原來的json';

 

　　這個方法很取巧（或者說很不講規范）在html文件里加入

<script type="text/javascript" src="data.json"></script>
<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';

　　 雖然不夠美觀，但至少問題簡單的解決了。