簡體   English   中英

JSON不顯示數據

[英]JSON doesn't show data

我正在嘗試學習如何使用JSON,但我已經停留在最基本的知識上了……現在,我想在我的ID Content中顯示json文件中的數據:author。

但是,當我單擊該元素時,它似乎不起作用。

腳本:

$(document).ready( function()
    {
        $('a').click(function(event)
        {
            event.preventDefault();

            $.ajax(
            {
                url:        'Booklist.json',
                dataType:   'json',
                success:    function(data)
                {   

                    $.each(data.Booklist, function(index, item)
                    {
                        $('#content').append(data.Booklist[0].author);
                        console.log(item);
                    });

                },
                error: function()
                {
                    alert("Houston, we have a problem");
                }   
            });             
        });
    });

JSON:

{
    "books": [
        {
            "title": "HTML5 Media, Integrating audio and video with the Web",
            "author": "Shelley Powers",
            "desc": "A detailed introduction to presenting audio and video in HTML5, from markup through scripting. It will explain not just placing content in pages but interaction through Javascript APIs, to build media players that could be used cross-browser.",
            "publishDate": "July 2011",
            "url": "http://oreilly.com/catalog/0636920019824/",
            "cover": [
                {
                    "type": "bigCover",
                    "source": "img/cat_005.gif",
                    "alternative": "HTML5 Media"
                },
                {
                    "type": "cover",
                    "source": "img/bkt_005.gif"
                }
            ]
        },
        {
            "title": "HTML5: Up and Running",
            "author": "Mark Pilgrim",
            "desc": "If you don't know about the new features available in HTML5, now's the time to find out. This book provides practical information about how and why the latest version of this markup language will significantly change the way you develop for the Web. HTML5: Up & Running carefully guides you though the important changes in this version with lots of hands-on examples, including markup, graphics, and screenshots. You'll learn how to use HTML5 markup to add video, offline capabilities, and more -- and youÕll be able to put that functionality to work right away.",
            "publishDate": "August 2010",
            "url": "http://oreilly.com/catalog/9780596806033/",
            "cover": [
                {
                    "type": "bigCover",
                    "source": "img/cat_noCover.gif",
                    "alternative": "HTML5 Up and Running"
                },
                {
                    "type": "cover",
                    "source": "img/bkt_noCover.gif"
                }
            ]
        }
    ]
}

JSON中的數組稱為books ,而不是Booklist ,因此請更改以下行:

$.each(data.Booklist, function(index, item)

$.each(data.books, function(index, item)

它應該工作。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM