维基百科 API Hello World 无法正常工作？

Question

以下简单代码不适用于维基百科 API。我不知道为什么。

html:

<button id="main" onclick=doThis()>Main</button>
<div id="result">h<div>

脚本：

function doThis() {
var wikiUrl = "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json";
$.getJSON(wikiUrl, function(data) {
  alert(data);
}, 
  $('#result').html("no")
)}

输出： $('#result').html("no") 行被执行，我相信这意味着 getJSON 没有 return 任何东西。

出了什么问题，我该如何解决？

Answer 1

如果您打开浏览器的控制台，您将看到此错误：

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

这表示您需要指示$.getJSON()使用jsonp。

为此，只需添加

&callback=?

给你的 url.

但是，正如@Rory 评论的那样，请注意：

请注意 JSON 和 JSONP 不能直接互换。这仅在此处有效，因为维基百科支持 JSONP，而许多 API 提供商不支持。

因此将您的代码更改为

function doThis() {

    var wikiUrl = "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?";

    $.getJSON(wikiUrl, function(data) {
        alert(data);
    }); 
)}

会起作用。

请注意 $('#result').html("no") 不是回调，因此将其用作回调没有任何积极效果。

Answer 2

您的调用存在一些 CORS 问题，而且您的错误回调是错误的。

试试

$.getJSON('https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?', function(data) {
   alert(data);
}, function() {
  $('#result').html("no");
});

维基百科 API Hello World 无法正常工作？

Wikipedia API Hello World not working?

javascript

jquery

getjson

wikipedia-api

mediawiki-api