0

ajax を使用して json ファイルを読み込んで html を作成しようとしていますが、何らかの理由で単純な ajax 呼び出しまたは .getJSON 呼び出しから返される json が null になります。ここに私のHTMLがあります:

<!doctype html>
<html>
  <head>
     <title>Lab 4 AJAX</title>
     <script type="text/javascript" src="resources/jquery-1.4.3.min.js"></script>
     <script src="lab4.js"></script>
  </head>
  <body>
    <div id="song-template">
      <a id="site" href="#"><img id="coverart" src="images/noalbum.png"/></a>
      <h1 id="title"></h1>
      <h2 id="artist"></h2>
      <h2 id="album"></h2>
      <p id="date"></p>
      <p id="genre"></p>
    </div>
  </body>
</html>

読み込もうとしている JSON のサンプルを次に示します。

[
    {
        "name" : "Short Skirt, Long Jacket",
        "artist" : "Cake",
        "album" : "Comfort Eagle",
        "genre" : "Rock",
        "year" : 2001,
        "albumCoverURL" : "images/ComfortEagle.jpg",
        "bandWebsiteURL" : "http://www.cakemusic.com"
    }
]

そして、ここに私がそれをロードしようとしているjavascriptがあります:

function updateHTML(json) 
{
    var templateNode = $("#song-template").clone(true);
    $("#song-template").remove();

    debugger;

    $.each(json, function(key, song)
    {
        var songNode = templateNode.clone(true);
        songNode.children("#site").href(song.bandWebsiteURL);
        songNode.children("#coverart").src(song.albumCoverURL);
        songNode.children("#title").text(song.name);
        songNode.children("#artist").text(song.artist);
        songNode.children("#album").text(song.album);
        songNode.children("#date").text(song.year);
        songNode.children("#genre").text(song.genre);
        $("body").append(songNode);
    });
}

$(document).ready(function()
{
    $("#site").click(function() 
    {
        $.getJSON("lab4.json", updateHTML);
        // $.ajax(
        // {
        //  url: "lab4.json",
        //  type: "GET",
        //  dataType: "json",
        //  success: updateHTML
        // });
    });
});

updateHTML が実行されると、getJSON と ajax の両方で json が null になります。何がこれを引き起こしているのでしょうか？

4

1 に答える 1

1

.hrefjQuery メソッドではあり.srcません。あなたは書く必要があります：

.attr("href", 
.attr("src",

http://jsfiddle.net/ExplosionPIlls/cwwCh/

于 2013-10-15T18:33:28.400 に答える