使用jQuery / Javascript在本地系統中加載JSON文件
[英]Load a JSON file in local system using jQuery/Javascript
問題描述
我是腳本語言的新手。 我有一個new.json文件，我想加載gary.html HTML文件。 我不想在服務器上運行gary.html文件。 我想在我的機器上本地運行它。
當我的HTML文件使用$.getJSON加載new.json文件時，我得到一個空白屏幕，當我在控制台上檢查時，我收到錯誤：
jquery-3.1.0.js：9392 XMLHttpRequest無法加載file：/// C：/Users/Gary/Desktop/new.json。 交叉源請求僅支持協議方案：http，數據，chrome，chrome-extension，https，chrome-extension-resource
這是我的加載代碼
function show() {
//read(a)
var myItems;
$.getJSON('new.json', function(data) {
myItems = data.a;
read(myItems)
});
}
當我搜索此錯誤時，人們建議我在firefox上運行此文件，或執行此chrome --allow-file-access-from-files 。 該文件正在firefox中加載，當我執行chrome --allow-file-access-from-files ，文件也會加載chrome。
我主要擔心的是，當我將new.json和gary.html文件分發給其他人時，其他人可能有也可能沒有firefox或chrome的chrome --allow-file-access-from-files權限。 我只想讓用戶點擊gary.html並加載new.json文件的數據。
我怎樣才能做到這一點？
2 個解決方案
解決方案1
2 已采納 2016-08-11 09:03:45
正如您所見 - 您無法向本地文件系統發出AJAX請求，因為它是一個巨大的安全問題。 唯一的解決方法是讓用戶在瀏覽器中手動啟用設置（無論如何這都不是一個好主意）。 如果您不想這樣，那么您將不得不為所有請求使用中央服務器。
另一種方法是通過使用額外的<script />標記在頁面中包含new.json文件來避免使用AJAX。 您還需要將對象分配給文件中的變量，如下所示：
// new.json
var newJson = {"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}
然后在gary.html ：
<head>
<script src="jquery.js"></script>
<script src="new.json"></script>
<script>
$(function() {
newJson.a.forEach(function(item) {
console.log(item.name);
});
})
</script>
</head>
解決方案2
1 2016-08-11 10:11:53
您無法向本地文件系統發出AJAX請求，因為這是一個巨大的安全問題。 為什么不能直接在HTML文件中直接包含JSON數據。 你不必進行AJAX調用來獲取JSON。
<head>
<script>
var jsonData = '{"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}';
for(var i=0; i< jsonData.a.length;i++)
{
var item = jsonData.a[i];
console.log(item.name);
}
</script>
</head>
加載本地 Json 文件並使用 Javascript 將其存儲在變量中
[英]Load a local Json file and store it in a variable using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.