2017-07-01 86 views
1

我要讀JSON文件動態,當我在JSON模式得到「$ REF」。的Javascript讀取文件

我曾嘗試用Node.js的 'FS' 模塊訪問JSON文件。但是,錯誤'fs.readFile()'不起作用。

我已經試過以後的Ajax調用,但我得到了下面的錯誤。

XMLHttpRequest cannot load file:///Users/as6/Downloads/1099K.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 

以下是我用javascript讀取json文件的代碼。

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); 
} 
readTextFile("file:///Users/as6/Downloads/1099K.json", function(text){ 
     var data = JSON.parse(text); 
     console.log(data); 
    }); 

我如何能夠讀取在JavaScript JSON文件,而無需jQuery的

+0

是這個函數在瀏覽器中執行?該文件在哪裏被保存?看起來像在服務器端 –

+0

我正在使用React js。我將如何安裝http服務器? –

回答

1

錯誤已經告訴你什麼是錯的。 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

事情是你試圖通過file://協議打開本地文件,並且瀏覽器告訴你,你不能使用XHR。這裏簡單的解決方法是在您的計算機上安裝一個最小的靜態文件服務器。

約CORS這裏的一些詳細信息:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

至於你提到的NodeJS,我會繼續前進,假設你已經安裝了它。我建議https://www.npmjs.com/package/http-server,這樣你就可以起牀和跑步了。

+0

我正在使用React js。我將如何安裝http服務器? –

+0

@AkashSateesh與安裝任何其他節點模塊我的朋友相同的方式。無論是'npm install - 全局http-server'(全局,所以你可以從命令行運行它)或者使用你選擇的模塊安裝程序。 更多關於故宮的位置:https://docs.npmjs.com/ – Nick

1

,你需要在該目錄中運行的服務器,而不是在瀏覽器中打開HTML。 嘗試在HTML文件所在的目錄中運行python -m SimpleHTTPServer。 將您的json文件移動到您的html文件所在的位置。然後替換文件:///Users/as6/Downloads/1099K.json與http://localhost:8000/1099K.json

瀏覽器是怪異這種方式,它不會讓你開始文件的鏈接做AJAX:///