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

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 :

All API responses are JSON, we do support JSONP with the jsonp query parameter.

(强调我的)

因此，您需要将 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。