2017-01-24 4 views
-1

Следующий простой код не работает над Wikipedia API. Я не знаю, почему.API Википедии Hello World не работает?

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 ничего не вернуть.

Что не так & Как исправить это?

+2

Вашего '$ ('#') результатом. HTML ("нет")' просто выполнить этот фрагмент кода сразу, это не обратный вызов. –

+0

Я добавил это, чтобы посмотреть, работает ли что-нибудь вообще. Без этого приложение выглядит как кирпич. Но дело в том, почему не получается получить JSON? –

+0

Вы уверены, что это не так? Вы проверили веб-консоль, чтобы узнать, что происходит с вызовом ajax? –

ответ

3

Если вы откроете консоль браузера, вы увидите сообщение об ошибке:

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=? 

в свой адрес.

Но, как @Rory отметил, примечание:

Заметьте, что JSON и JSONP не являются непосредственно взаимозаменяемыми. Это работает только здесь, так как Wikipedia поддерживает 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") не является обратным вызовом, поэтому использование его как одного не имеет никакого положительного эффекта.

+0

Хороший ответ, хотя обратите внимание, что JSON и JSONP не являются напрямую взаимозаменяемыми. Это работает только здесь, так как Wikipedia поддерживает JSONP, тогда как многие поставщики API этого не делают. –

+0

хорошо работает. Но я действительно не понял. Википедия предоставляет только jsonp, а также json? –

+0

Спасибо @RoryMcCrossan Я добавил это к ответу! – baao

1

У вас есть проблема с 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"); 
}); 
Смежные вопросы