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

【问题标题】：Can't get data from Stack Overflow JSON request in JS无法从 JS 中的 Stack Overflow JSON 请求获取数据
【发布时间】：2013-06-14 05:17:36
【问题描述】：

我要做的只是显示 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>

谁能帮忙解决我做错了什么？

【问题讨论】：

<a>s 的列表根本没有填满<div> :(
我怀疑您的请求是否有效。检查您的浏览器是否有错误 >> 。您正在尝试从其他域访问它
需要使用jsonp处理跨域问题api.stackoverflow.com/1.1/questions?pagesize=20&jsonp=?

标签： jquery json

【解决方案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。

【讨论】：

谢谢！这帮助很大。

【解决方案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>

【讨论】：

我知道该政策，但它如何允许其他网站或网络应用在 JSON 之外提取？
@JodyHeavener 他们很可能正在使用JSONP，这实际上只是一个脚本标签，不受制于相同的域来源策略。
我不认为这是问题所在，因为从他的评论来看，他的<a> 似乎已被填满。如果他根本没有得到任何数据，那肯定是他的问题。

【解决方案3】：

你需要使用JSONPWhat is JSONP all about?

来自 jQuery 文档：

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

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案5】：

不确定，但试试

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

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

【讨论】：