jQuery .getJSON和.ajax獲取請求都返回null

我想加載一個帶有Ajax的json文件來填充我的html，無論出於何種原因，當我嘗試這樣做時，從簡單的ajax調用或.getJSON調用爲空。這是我的HTML：jQuery .getJSON和.ajax獲取請求都返回null

<!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爲空。任何想法可能會造成這種情況？

來源

2013-10-15 Logan Shire

檢查控制檯網絡選項卡，被請求去通？ – tymeJV

調用'lab4.json'時從服務器獲得什麼響應？ –

我看到非常可能的重複ID情況 –

.href和.src不是jQuery方法。你需要寫：

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

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

來源

2013-10-15 18:33:28

謝謝你。我更新了它，但ajax請求仍然返回null。 –

@LoganShire當你在瀏覽器中訪問'lab4.json'時會發生什麼？請確保路徑匹配，因爲您使用的是相對路徑 –

我剛纔查看了網絡請求，並且出現錯誤 - Access-Control-Allow-Origin不允許Origin null。你知道這可能是什麼原因嗎？ –

jQuery .getJSON和.ajax獲取請求都返回null

回答

相關問題