在 JQuery 中加载本地 json 文件答案

【问题标题】：Load local json file in JQuery在 JQuery 中加载本地 json 文件
【发布时间】：2018-02-16 03:25:53
【问题描述】：

这里是初学者...我一直在尝试与此主题的答案不同的方法但它们似乎都不起作用。我看到这个问题被问了很多，但不知何故我仍然找不到我的答案。我想使用本地 json 文件，该文件与我的 JavaScript 和 HTML 文件位于同一文件夹中，因此我可以从其中的对象制作表格并能够从中添加或删除对象。如您所知，评论的解决方案不起作用。有什么帮助吗？

HTML 文件：

<!DOCTYPE html>
<html>
    <head>

        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />

    </head>
    <body>

            <button id="json">json</button>

        <!-- <script type="text/javascript" src="books.json"></script> -->
        <script src="jquery-3.2.1.js"></script>
        <script src="script.js"></script>

    </body>
</html>

JavaScript 文件：

$(document).ready(function(){
    // var myBooks = JSON.parse(books);


        $(document).on('click', '#json', function (event) {

                // alert(myBooks[0].author);
                // alert(myBooks[0].title);
                // alert(myBooks[1].author);
                // alert(myBooks[1].title);
        });

});

我的 books.json 文件

[
    {
        "author": "Margaret Atwood",
        "title": "THE HANDMAID'S TALE"
    },
    {
        "author": "Ursula K. Le Guin",
        "title": "THE DISPOSSESSED"
    },
    {
        "author": "Mary Shelley",
        "title": "FRANKENSTEIN"
    },
    {
        "author": "Ursula K. Le Guin",
        "title": "THE LEFT HAND OF DARKNESS"
    },
    {
        "author": "Connie Willis",
        "title": "DOOMSDAY BOOK"
    },
    {
        "author": "Frank Herbert",
        "title": "DUNE"
    },
    {
        "author": "Maureen F. McHugh",
        "title": "CHINA MOUNTAIN ZHANG"
    },
    {
        "author": "Joe Haldeman",
        "title": "THE FOREVER WAR"
    },
    {
        "author": "Kate Wilhelm",
        "title": "WHERE LATE THE SWEET BIRDS SANG"
    },
    {
        "author": "Orson Scott Card",
        "title": "ENDER'S GAME"
    },
    {
        "author": "Daniel Keyes",
        "title": "FLOWERS FOR ALGERNON"
    }
]

【问题讨论】：

你将不得不向 .json 文件发出 ajax 请求，例如：$.get("/books.json").then(function(myBooks) { alert(myBooks[0].author); });
重复：stackoverflow.com/questions/19706046/…

标签： jquery json

【解决方案1】：

试试这个：

$.getJSON("books.json", function(json) {
    console.log(json);
    //access your JSON file through the variable "json"
});

【讨论】：

控制台错误：无法加载文件//....//books.json。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。