在JavaScript中使用.JSON

Fab*_*osh 1 javascript jquery json getjson

对于我当前的项目,我想在JavaScript中读取JSON文件的值.因为我对他们两个都不熟悉,我有点失落.使用下面的代码,我在JavaScript控制台中收到以下错误:

XMLHttpRequest无法加载file:///Users/Fabio/Desktop/SkriptET/files.json.收到无效回复.因此不允许原点'null'访问.

但是文件保存在那里.

的index.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
  </head>
  <body>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

files.json

{
   "category":
    {
       "Gleichstromkreise":
        [
            {
                "title":"Elektrische Ladung Q",
                "url":"/elladq.html",
                "url_next": "/coulomb.html",
                "url_prev": "/index.html"    
            },
            {
                "title":"Coulombsches Gesetz",
                "url":"/coulomb.html",
                "url_next":"/el_spannung.html",
                "url_prev":"ellektrische_ladung_q.html"
            }
            ],
        "Elektrische Felder":
            [
                ...
            ]
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript.js

$.getJSON( "files.json", function( data ) {
    alert(data.category.Gleichstromkreise[0].title);
});
Run Code Online (Sandbox Code Playgroud)

T.J*_*der 6

问题不是JSON,而是同源策略.当您的页面从本地文件加载而不是通过HTTP加载时,它的原点是"null".某些浏览器阻止origin null和origin null之间的ajax调用,甚至阻止从同一目录加载文件.

如果您通过Web服务器运行它(您可以在本地安装一个用于开发),则文件将具有相同的来源,浏览器将允许您加载JSON文件.