2016-12-04 56 views
1

私は外部のローカル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"]}

+0

私はローカルファイルを取得できないと確信しています。可能であれば、XMLHttpRequestパスに 'file:'プロトコルが必要になるでしょう。 [この回答](http://stackoverflow.com/a/11063963/1848578)が役立ちます。 – qxz

+0

私が投稿したリンクの3番目の答えは、私がローカルファイルを取得できるかもしれないと言いました。私はそれが奇妙であることを知っています.. – vkosyj

+0

設定に応じて、いくつかのブラウザでは動作しないかもしれません。あなたがそれについて考えるなら、ウェブページがあなたのコンピュータ上の任意のファイルの内容を読むことができれば、深刻なセキュリティ上の問題になるでしょう。 – qxz

答えて

1

ローカルでの学習とテストでは、Firefoxの使用を強くお勧めします。ローカルファイルの読み込みに関しては非常に怠惰なので、開発するのに最適なブラウザです。

たとえば、xhrを使用してローカルファイルをロードできます。

ローカルシステムからファイルを読み込むことはできません... HTMLページ(相対) "foo/bar/data.json"から "forward forward"したファイルだけでなく、 "C:/ data" .json "

ローカルファイルシステムとhttpが全く別の2つの動物であることも考慮する必要があります。ブラウザーが「http要求」を出すと、ヘッダー、応答コード、およびデータが返されると想定しています。ローカルファイルをロードするときは、「要求」は生データをロードするためのシステムレベルのメッセージなので、ヘッダやレスポンスコードはありません。これらの相違点の1つの指標は、システムからブラウザウィンドウにファイルをドラッグアンドドロップすると、http://

を使用して、file:///とWebページを比較する方法です。

最後にもう1つ。 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解析を処理してください。

AngularJS使用
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); 
} 
+0

それは私にとって意味があります。私はまだその道については確信が持てません。あなたはこれを見て気にしますか? http://stackoverflow.com/questions/40955691/fail-to-find-the-path-when-running-on-the-server-using-jsp – vkosyj

+0

"test.json"ファイルは次のフォルダと同じフォルダにある必要があります。 HTMLファイル。 – bob

0

Ajax経由でローカルファイルにアクセスすることはできません。ブラウザの定義これは操作するのが安全ではありません。

+0

http://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascriptのようにラベル付けされています。第3の答えを確認してください – vkosyj

+0

あなたは答えを誤解しました。このファイルはWebサーバーから提供され、通常のcss/html/jsファイルのようなhttpプロトコルを使用してロードされます。 –

+0

クロムでこれを行うと、--allow-file-access-from-filesで実行します。 – Tan

0

:URLはローカルのJSONファイルへのパスになります

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

:jQueryのを使用して$ HTTPサービス

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

を。

関連する問題