將外部本地JSON文件讀入Javascript

我正在學習將外部本地JSON文件讀入javascript。我按照以下將外部本地JSON文件讀入Javascript

How to read an external local JSON file in Javascript

然而，鏈接，我無法做到這一點。我在我的C盤中有一個test.json，其路徑是「c：\\ test.json」。我認爲我的程序是這樣工作的：當本地json文件中的內容被更新時，我的程序將提醒json文件中的數據。我不知道我的程序有什麼問題。希望有人能幫助我。先謝謝你。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>noName</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script type="text/javascript" src="test.json"></script> 
    <script type="text/javascript" src="javascrip.js"></script> 
</head> 


<script type="text/javascript"> 

    $(document).ready(function() { 
     alert("goes here "); 
     readTextFile("c:/test.json", function(text){ 
     var data = JSON.parse(text); 
     alert(data); 
    }); 
}); 


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); 
}

test.json

{ 「筆記」：[ 「S0」，「S5」，「S4」，「S3」，「S2」，「s1」]}

來源

2016-12-04 vkosyj

我很確定你不能獲取本地文件。如果可以的話，你可能需要XMLHttpRequest路徑中的'file：'協議。 [這個答案]（http://stackoverflow.com/a/11063963/1848578）應該是有幫助的。 – qxz

我發佈的鏈接中的第三個答案表示我可以獲取本地文件..我知道這很奇怪。 – vkosyj

根據您的設置，它可能在某些瀏覽器中運行，而在其他瀏覽器中運行。如果你仔細想想，如果任何網頁能夠讀取你計算機上任意文件的內容，那將是一個嚴重的安全問題。 – qxz

爲了在本地學習和測試，我強烈建議使用Firefox。這是一個非常棒的瀏覽器，因爲在加載本地文件方面相當鬆懈。

例如，它可以使用xhr加載本地文件沒有問題。

請注意，您不能從本地系統加載任何文件...只是從您的HTML頁面（相對）「foo/bar/data.json」「文件」向前看，而不是「C：/ data以.json」。

要考慮的另一件事是本地文件系統和http是兩個完全不同的動物。當一個瀏覽器發出「http請求」時，它假定一個標題，響應代碼和數據將會回到它。然而，當加載本地文件時，不存在標題或響應代碼，因爲「請求」只是加載原始數據的系統級消息。這些差異的一個指標是，當您將文件從系統拖放到瀏覽器窗口時，您將看到file：///與網頁使用http：//

希望這會有所幫助。

還有最後一件事。當您使用overrideMimeType（「application/json」）時，您要求瀏覽器將結果響應解析爲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); 
      callback(rawFile.response); 
     } 
    }; 
    rawFile.send(null); 
}

這樣你不應該再解析JSON？

或者，不要超過響應，並像你在做的那樣處理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); 
}

來源

2016-12-04 05:15:32 bob

它對我來說很有意義。我對路線仍然不太確定。你介意看看這個嗎？ http://stackoverflow.com/questions/40955691/fail-to-find-the-path-when-running-on-the-server-using-jsp – vkosyj

「test.json」文件應該位於相同的文件夾中HTML文件。 – bob

您無法通過Ajax訪問本地文件。瀏覽器定義這是不安全的操作。

來源

2016-12-04 04:16:59 Tan

http://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript我認爲它可以完成。請檢查第三個答案 – vkosyj

你誤解了答案。該文件是從Web服務器提供的，並使用http協議加載，如普通的css/html/js文件。 –

如果你在Chrome上這樣做，你可以通過--allow-file-access-from-files – Tan

使用AngularJS：$ http服務

$http.get(url) 
.then(function(response) { 
    // Use the response Json data 
});

使用jQuery：

$.getJSON(url, function(result){ 
    //use result Json data 
});

其中URL將是路徑到本地JSON文件。

來源

2016-12-04 05:36:43

將外部本地JSON文件讀入Javascript

回答

相關問題