Wikipedia API Hallo Welt funktioniert nicht?

Question

Der folgende einfache Code funktioniert nicht für Wikipedia API. Ich bin mir nicht sicher warum.

html:

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

Script:

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") 
)} 

Ausgang: die $('#result').html("no") Linie ausgeführt wird, die ich bedeutet glauben, dass die getJSON nichts zurückgekommen.

Was ist los & Wie kann ich das beheben?

Answer 1

Wenn Sie Ihren Browser-Konsole öffnen, wird dieser Fehler angezeigt:

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.

Dies zeigt an, dass Sie $.getJSON() instruieren müssen jsonp zu verwenden.

Dazu einfach

&callback=? 

zu Ihrer URL hinzuzufügen.

Aber, wie @Rory kommentierte Anmerkung:

Beachten Sie, dass JSON und JSONP nicht direkt austauschbar sind. Dies funktioniert nur, da Wikipedia JSONP unterstützt, während dies bei vielen API-Anbietern nicht der Fall ist.

Ändern So Ihr Code zu

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

arbeiten.

Beachten Sie, dass $('#result').html("no") kein Rückruf ist, so dass es keinen positiven Effekt hat.

Answer 2

Sie haben einige CORS Problem bei dem Aufruf, neben Ihrem Fehler Rückruf ist falsch.

Versuchen mit

$.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"); 
});