Question

我要做的就是显示最近20个Stack Overflow问题的链接，使用jQuery来获取JSON数据。

我的jQuery ......

$.getJSON('http://api.stackoverflow.com/1.1/questions?pagesize=20', function(data) {
    $.each(data.questions, function(i,data){
        var question_list = '<a href="#">' + data.title + '</a>'; 
        $("div.questions").append(question_list);
    })
});

当然我的HTML ......

<div class=questions></div>

任何人都可以帮我解决我的错误吗？

Answer 1

StackOverflow API使用JSONP：

所有API响应都是JSON，我们支持使用 jsonp查询参数的JSONP。

（强调我的）

因此，您需要将AJAX调用转换为使用$.ajax并正确填充选项以发出请求：

$.ajax({
    url: 'http://api.stackoverflow.com/1.1/questions',
    dataType: 'jsonp',  // let jQuery know this is a JSONP request.
    jsonp: 'jsonp',     // the callback parameter SO uses is called 'jsonp'
    data: {             // options that will get placed in the query string
        pagesize: 20
    },
    success: function (data) {
        $.each(data.questions, function (i, data) {
            var question_list = '<li><a href="#">' + data.title + '</a></li>';
            $(".questions").append(question_list);
        })
    }
});

示例： http://jsfiddle.net/QydkZ/1/

我调整了成功回调以做一些更具可读性的事情，但概念是一样的。

作为旁注，不推荐使用您正在使用的StackOverflow API版本。这就是你如何针对API的2.1（当前版本）编写这个：

$.ajax({
    url: 'http://api.stackexchange.com/2.1/questions',
    dataType: 'jsonp',
    jsonp: 'jsonp',
    data: {
        pagesize: 20,
        site: 'stackoverflow'
    },
    success: function (data) {
        $.each(data.items, function (i, data) {
            var question_list = '<li><a href="#">' + data.title + '</a></li>';
            $(".questions").append(question_list);
        })
    }
});

示例： http://jsfiddle.net/k4AnW/1/

我强烈建议您使用当前版本的API。

Answer 2

根据jQuery文档......

由于浏览器安全限制，大多数“Ajax”请求都是主题同源政策;请求无法成功检索来自不同域，子域或协议的数据。脚本和JSONP 请求不受相同的原始政策限制。

来自xyz.com的您的ajax请求无法访问stackoverflow.com

中的数据

XMLHttpRequest cannot load http://api.stackoverflow.com/1.1/questions?pagesize=20. Origin http://mytest.com is not allowed by Access-Control-Allow-Origin.

你可以使用什么。

<script src="http://api.stackoverflow.com/1.1/questions?jsonp=yourCallback"></script>
<script>function yourCallback(JSONdata) { }</script>

Answer 3

您需要使用JSONP What is JSONP all about?

来自jQuery文档：

如果网址包含字符串“callback =？” （或类似的，由...定义）在服务器端API），请求被视为JSONP。见讨论$ .ajax（）中的jsonp数据类型以获取更多详细信息。

http://api.jquery.com/jQuery.getJSON/

Answer 4

在追加之前，请确保您的数据question_list正确无误。

var question_list = '<a href="#">' + data.title + '</a>'; 

// View the question_list in fire bug here by console print and make sure 
// you are correct up to this place.

$("div.questions").append(question_list);

Answer 5

不确定，但请尝试

$('div.questions').append($(question_list))

确保它是一个可附加的对象。

无法从JS中获取Stack Overflow JSON请求中的数据

5 个答案: