在JQuery中加载本地json文件

2024-05-08

这里是初学者......我一直在尝试与该主题的答案不同的方法 但它们似乎都不起作用。我看到这个问题已经被问了很多,但不知何故我仍然找不到答案。我想使用本地 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"
    }
] 

尝试这个:

$.getJSON("books.json", function(json) {
    console.log(json);
    //access your JSON file through the variable "json"
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在JQuery中加载本地json文件 的相关文章

随机推荐