尽管成功，$.getJSON 没有返回任何内容

Posted 2023-04-15

【中文标题】尽管成功，$.getJSON 没有返回任何内容

【英文标题】：$.getJSON not returning anything despite success

【发布时间】：2016-03-20 07:47:39

【问题描述】：

我对整个 jQuery 的东西还比较陌生，所以如果这是一件很明显的事情，我深表歉意。

我的基本问题是 .getJSON() 函数中的 URL 没有返回任何内容，尽管 JSON 文件有效。

jQuery:

$(document).ready(function() 
  var key = '*****************'

  var getMusic = function() 
      $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin', function(data) 
          $('.songs').append('<li>success</li>');
          data['songs'].forEach(function(d) 
              $('.songs').append('<li>' + d['title'] + '</li>');
          );
      );
  ;

  $('.click').click(getMusic);
);

所以“成功”被附加到列表中，但没有其他内容。 Chrome 中的调试控制台给了我以下错误：Uncaught TypeError: Cannot read property 'forEach' of undefined

我假设这意味着 URL 没有向函数传递任何内容。但是 URL 是有效的。如果我只是在 Chrome 中输入它，我会得到以下响应。

  
  "response":  
  "status":  
     "version":"4.2",
     "code":0,
     "message":"Success"
  ,
  "songs":[  
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOWOYIL14EEE38DB16",
        "artist_name":"Led Zeppelin",
        "title":"St. Tristan's Sword (Rough Mix)"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOWTZWK12A6D4FC7A8",
        "artist_name":"Led Zeppelin",
        "title":"Rock And Roll - 2007 Remastered Version Live Version From The Song Remains The Same"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOWYEOY14EEE39630C",
        "artist_name":"Led Zeppelin",
        "title":"Bring It On Home (Rough Mix)"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXAPFT12AF72A0776",
        "artist_name":"Led Zeppelin",
        "title":"The Ocean (Live Album Version)"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOTYJLS12A8C13B4A9",
        "artist_name":"Led Zeppelin",
        "title":"Somethin' Else - \"Tasty Pop Sundae\" Live Version From BBC Sessions"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOUQMIU12B0B8083DF",
        "artist_name":"Led Zeppelin",
        "title":"1-06 For Your Life"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOUKOUX12B0B80B0BA",
        "artist_name":"Led Zeppelin",
        "title":"308 - The Song Remains The Same"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXXFOR12A8C13A5C6",
        "artist_name":"Led Zeppelin",
        "title":"Whole Lotta Love - \"Top Gear\" Live Version From BBC Sessions"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXHHNN14DB525B914",
        "artist_name":"Led Zeppelin",
        "title":"Heartbreaker (For Voice)"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXWXGG12B0B80B0AF",
        "artist_name":"Led Zeppelin",
        "title":"1-07 Trampled Underfoot"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXWUUS12B0B80B0D9",
        "artist_name":"Led Zeppelin",
        "title":"412 - Moby Dick -- Bonzo's Montreux"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXVXFK12B0B80B0C2",
        "artist_name":"Led Zeppelin",
        "title":"02 Going to California"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXZGKC12A8C13B4C9",
        "artist_name":"Led Zeppelin",
        "title":"Heartbreaker - \"In Concert\" Live Version From BBC Sessions"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOXEDBF14EC9C340F9",
        "artist_name":"Led Zeppelin",
        "title":"10 Ribs & All/Carrot Pod Pod (Pod) (Reference Mix)"
     ,
       
        "artist_id":"ARDIBRT1187B9AF176",
        "id":"SOYIZYO12C106D04DB",
        "artist_name":"Led Zeppelin",
        "title":"Ramble On (1999 Star System Mix)"
     
    ]
   
  

我不确定为什么代码没有按预期执行。

【问题讨论】：

然后你打开了控制台并检查了错误，对吧？

您是否尝试将console.log(data) 放入回调中以查看真正返回的内容？您还应该能够在浏览器控制台（网络选项卡，取决于您的浏览器）中看到它。

【参考方案1】：

您错误地访问了来自$.getJSON 的数据 您需要先获得回复：

data.response['songs']

$(document).ready(function() 
  var key = '*****************'

  var getMusic = function() 
      $.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin', function(data) 
          $('.songs').append('<li>success</li>');
          data.response['songs'].forEach(function(d) 
              $('.songs').append('<li>' + d['title'] + '</li>');
          );
      );
  ;

  $('.click').click(getMusic);
);

【讨论】：

@khanu263 很高兴它有帮助

【参考方案2】：

请注意，data 是根 JSON 对象，它具有 response 属性。 songs 在response 属性中，所以要访问它，你必须访问data.response.songs

正确的代码是：

data.response.songs.forEach(function (song) 
    $('.songs').append('<li>' + song.title + '</li>');
);

---

如果必须使用 JSONP

根据@Pointy 的评论，出于安全原因（可能是跨域问题），您应该使用JSONP。

为了使用 JSONP，您必须提供一个回调函数，将 &callback=? 附加到服务端点的末尾。 （jQuery 将在发送请求时发送适当的callback 值）

// Note the trailing "callback=?"
$.getJSON('http://developer.echonest.com/api/v4/song/search?api_key=' + key + '&artist=led+zeppelin&callback=?')
.done(function (data) 
    $('.songs').append('<li>success</li>');
    data.response.songs.forEach(function (song) 
        $('.songs').append('<li>' + song.title + '</li>');
    );
);

【讨论】：

您对响应的结构是正确的，但根据 Echonest 站点上的一些文档，我认为 OP 必须切换到 JSONP 才能直接从浏览器使用该服务。