如何使用javascript和jQuery从JSON中检索数据?

时间:2015-12-02 22:36:26

标签: javascript jquery json cors jsonp

好的,所以我一直在尝试从这个网站检索JSON中的单个字符串: http://blog.teamtreehouse.com/api/get_recent_summary/?count=1

这是我的代码:

<html>
<head>
<title>Simple Page</title>
</head>
  <script src="jquery.js"></script>
    <script>
    $(document).ready(function() {
        $.getJSON('http://blog.teamtreehouse.com/api/get_recent_summary/?count=1', function(data) 
        { 
            alert(data.title)
        });     
    });
    </script>
</html>

只是想获得一个简单的标题并将其显示为警报或者只是将其写在网站上,出于某种原因我无法做到正确。我还检查了我的jquery是否正在工作,所以它不可能。

提前致谢!

3 个答案:

答案 0 :(得分:4)

No 'Access-Control-Allow-Origin' header is present on the requested resource.

缺少CORS HTTP标头,因此您无法直接执行AJAX请求。您需要使用服务器端代理或使用http://crossorigin.me/服务从远程网站获取数据。

您正在访问的服务器提供JSONP支持,因此您可以通过将callback=?添加到URL

将其转换为JSONP调用
$.getJSON('http://blog.teamtreehouse.com/api/get_recent_summary/?count=1&callback=?', function(data) 
{ 
    alert(data.posts[0].title)
});

如果不支持JSONP,您可以使用crossorigin.me服务,但我不会依赖此服务进行生产使用。

$.getJSON('http://crossorigin.me/http://blog.teamtreehouse.com/api/get_recent_summary/?count=1', function(data) 
        { 
            alert(data.posts[0].title)
        }); 

答案 1 :(得分:0)

查看从提供的端点返回的数据,您的回调应为alert(data.posts[0].title)

答案 2 :(得分:0)

对于这种类型的错误,您需要传递标题参数,同时请求检查以下链接...

How to allow CORS? Getting Cross Origin Block Request [CORS] error when using .getJSON to get Play Store App Details