52

こんにちは、JQuery を使用してローカルの JSON ファイルを読み込んでデータを表示しようとしていますが、奇妙なエラーが発生しています。これを解決する方法を教えてください。

<html>
 <head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        

<script type="text/javascript">
    $(document).ready(function(e) {
    $.getJSON( "priorities.json" , function( result ){
        alert(result.start.count);
    });
});
</script></head>
</html>

JSON データの数を警告しているだけです。私の JSON ファイルは、この html ファイルと同じディレクトリにあり、JSON 文字列形式を以下に示します。

{
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

JSONファイル名のpriorities.jsonとエラーは

キャッチされていない参照エラーの優先度が定義されていません

4

7 に答える 7

39

セキュリティ上の問題 (同一生成元ポリシー) により、ユーザーの操作がない場合、ローカル ファイルへの JavaScript アクセスは制限されます。

https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIsによると:

ファイルは、元のファイルの親ディレクトリがターゲット ファイルの祖先ディレクトリである場合にのみ、別のファイルを読み取ることができます。

Web サイトの JavaScript が、システム内の任意の場所で、ユーザーが気付かないうちにファイルを盗もうとする状況を想像してみてください。Web サーバーにデプロイする必要があります。または、script タグを付けてロードしてみてください。このような：

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>        
<script type="text/javascript" language="javascript" src="priorities.json"></script> 

<script type="text/javascript">
   $(document).ready(function(e) {
         alert(jsonObject.start.count);
   });
</script>

あなたのpriorities.jsonファイル：

var jsonObject = {
"start": {
    "count": "5",
    "title": "start",
    "priorities": [
        {
            "txt": "Work"
        },
        {
            "txt": "Time Sense"
        },
        {
            "txt": "Dicipline"
        },
        {
            "txt": "Confidence"
        },
        {
            "txt": "CrossFunctional"
        }
    ]
}
}

または、ページでコールバック関数を宣言し、jsonp 手法のようにラップします。

<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js">    </script> 
     <script type="text/javascript">
           $(document).ready(function(e) {

           });

           function jsonCallback(jsonObject){
               alert(jsonObject.start.count);
           }
        </script>

 <script type="text/javascript" language="javascript" src="priorities.json"></script>

あなたのpriorities.jsonファイル：

jsonCallback({
    "start": {
        "count": "5",
        "title": "start",
        "priorities": [
            {
                "txt": "Work"
            },
            {
                "txt": "Time Sense"
            },
            {
                "txt": "Dicipline"
            },
            {
                "txt": "Confidence"
            },
            {
                "txt": "CrossFunctional"
            }
        ]
    }
    })

スクリプト タグの使用は JSONP と同様の手法ですが、このアプローチではそれほど柔軟ではありません。Web サーバーにデプロイすることをお勧めします。

ユーザーの操作により、javascript はファイルへのアクセスを許可されます。それはFile APIの場合です。ファイル API を使用すると、javascript は、ユーザーがデスクトップから選択した<input type="file"/>ファイル、またはデスクトップからブラウザにドロップしたファイルにアクセスできます。

于 2013-09-05T13:27:40.577 に答える
38

JSON オブジェクトを変数として宣言する Javascript ファイルを HTML に含めるだけです。data.employees次に、たとえばを使用して、グローバル Javascript スコープから JSON データにアクセスできます。

index.html:

<html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

data.js:

var data = {
  "start": {
    "count": "5",
    "title": "start",
    "priorities": [{
      "txt": "Work"
    }, {
      "txt": "Time Sense"
    }, {
      "txt": "Dicipline"
    }, {
      "txt": "Confidence"
    }, {
      "txt": "CrossFunctional"
    }]
  }
}
于 2015-04-02T16:20:36.453 に答える
27

jQuery API が言うように、「GET HTTP 要求を使用してサーバーから JSON でエンコードされたデータをロードします」。

http://api.jquery.com/jQuery.getJSON/

そのため、その関数でローカル ファイルをロードすることはできません。しかし、Web を閲覧すると、次のスレッドにあるように、JavaScript ではファイルシステムからファイルをロードするのが非常に難しいことがわかります。

JavaScript を使用したローカル ファイル アクセス

于 2013-09-05T13:23:52.130 に答える
-2

オブジェクトを .txt ファイルとして保存してから、次のように取得しようとします。

 $.get('yourJsonFileAsString.txt', function(data) {
   console.log( $.parseJSON( data ) );
 });
于 2014-11-27T02:59:23.320 に答える
-2

次の方法を使用しましたが、どれも機能しませんでした：

   // 2 Method Failed

        $.get(
            'http://www.corsproxy.com/' +
            'en.github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
            function (response) {
                console.log("> ", response);
                $("#viewer").html(response);
            });
// 3 Method Failed

    var jqxhr = $.getJSON( "./json/movies-coming-soon.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  console.log( "second complete" );
});

// 4 Method Failed

$.ajax({
   type: 'POST',
   crossDomain: true,
   dataType: 'jsonp',
   url: 'https://github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
   success: function(jsondata){
    console.log(jsondata)
   }
})

// 5 Method Failed


$.ajax({
   url: 'https://github.com/FEND16/movie-json-data/blob/master/json/movies-coming-soon.json',
   headers: {  'Access-Control-Allow-Origin': 'htt://site allowed to access' },
   dataType: 'jsonp',
   /* etc */
   success: function(jsondata){

   }
})

「200 OK!」という Chrome 拡張機能をダウンロードするだけでうまくいきました。またはChrome用のWebサーバーで、次のようにコードを記述します。

// Worked After local Web Server

        $(document).ready(function () {
            $.getJSON('./json/movies-coming-soon.json', function (data) {
              var movie_name = '';
              var movie_year = '';
                $.each(data,function(i,item){
                    console.log(item.title,item.year,item.poster)
                    movie_name += item.title + "  " + item.year + "<br> <br>"

                    $('#movie_name').html(movie_name)


                })

            })

        })

CORSポリシーに従ってローカルWebサーバーを実行しないとローカルファイルにアクセスできないため、実行するにはホストサーバーが必要です。

于 2020-02-12T02:39:28.553 に答える