3

All I'm trying to do is display links to the 20 most recent Stack Overflow Questions, using jQuery to grab the JSON data.

My 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);
    })
});

And of course my HTML...

<div class=questions></div>

Can anyone help with what I'm doing wrong?

4

5 回答 5

3

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。

于 2013-06-13T20:53:17.330 回答
1

根据 jQuery 文档...

由于浏览器安全限制，大部分“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议成功检索数据。脚本和 JSONP 请求不受同源策略限制。

您的 ajax 请求xyz.com无法访问来自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>
于 2013-06-13T20:48:44.897 回答
0

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

来自 jQuery 文档：

如果 URL 包含字符串“callback=?” （或类似的，由服务器端 API 定义），请求被视为 JSONP。有关详细信息，请参阅 $.ajax() 中对 jsonp 数据类型的讨论。

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

于 2013-06-13T20:54:17.873 回答
0

在追加之前请确保您的数据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);
于 2013-06-13T20:54:18.427 回答
-1

不确定，但试试

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

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

于 2013-06-13T20:47:15.890 回答