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

回答

相关问题