Question

我用谷歌搜索了几个小时并检查了文档，但我似乎无法找到我的jQuery有什么问题...我正在尝试练习读取本地JSON文件并在HTML的正文中显示内容。

$(document).ready(function(){
    $.getJSON( "test.json", function( data ) {
        var items = [];
        $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
            console.log(data); 
        });
        $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
        }).appendTo( "body" );
    });

});

和Heres在同一个文件夹中的实际json文件：

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

当我打开index.html时，我只得到一个空白的身体。 index.html有

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/JavaScript" src="script.js"></script>

所以我知道这不应该是我的链接问题......

更新：现在是控制台的新输出：

 XMLHttpRequest cannot load file:///C:/Users/Steven/Desktop/meltApplication/test.json.    Received an invalid response. Origin 'null' is therefore not allowed access.

Answer 1

//：表示使用与当前页面相同的模式，因此如果您已在本地打开文件（如果地址栏中的URL为file：// ...），则您的模式为file：/ /，因此脚本将在本地计算机上查找JQuery，如错误所示。

做@Melvinr说的正确加载JQuery，然后你可以继续调试你的其余代码。

Answer 2

您没有添加http协议，因此这意味着浏览器将尝试在本地查找js

使用它来添加jquery引用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在我的代码中查找用于解析JSON的错误

2 个答案: