2016-12-25 3 views
2

доступа к данным Wikipedia API JSON в JQuery

$('#searchButton').click(function(){ 
 
    var searchInput = ""; 
 
    searchInput = document.getElementById('test'); 
 
    if(searchInput.value !== ""){ 
 
    $.getJSON('https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch='+searchInput+'&utf8=', function(json){ 
 
     alert(json.query.search[0].title); 
 
    }); 
 
    } 
 
});

Я запутался, почему кажутся оленья кожа Json, чтобы нагружать на страницу. Кажется, что вся операция останавливается на URL-адресе, даже если я ввожу строку в предупреждение, что она не запускается либо ...

+0

вероятно, это CORS. Вы видели сообщения на консоли? – Alexan

+0

https://stackoverflow.com/questions/37106041/does-wikipedia-api-support-cors-or-only-jsonp-available – Alexan

+0

Это сообщение, которое я получил на консоли 'index.html: 1 XMLHttpRequest не может загрузить https : //en.wikipedia.org/w/api.php действие = запрос и список = поиск и формат = & srsearch JSON = [объект% 20HTMLInputElement] & utf8 =. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Происхождение «http://s.codepen.io», следовательно, не допускается. «Я не совсем уверен, что все это значит, но спасибо за помощь, и я не понимаю, как это понять. –

ответ

1

У вас есть эта ошибка, так как CORS не включен для источника, из которого вы звоните. mediawiki, и вы можете проверить здесь больше.

https://www.mediawiki.org/wiki/Manual:CORS

Вы можете использовать jQuery jsonp запрос, как показано ниже с dataType: 'jsonp' вместо.

Рабочий фрагмент:

$(document).ready(function() { 
 

 
$('#searchButton').click(function(){ 
 
    var searchInput = ""; 
 
    searchInput = document.getElementById('test'); 
 
    if(searchInput.value !== ""){ 
 
    
 
    $.ajax({ 
 
    url: 'https://en.wikipedia.org/w/api.php', 
 
    data: { 
 
     action: 'query', 
 
     list: 'search', 
 
     format: 'json', 
 
     srsearch: searchInput.value 
 
    }, 
 
    dataType: 'jsonp' 
 
}).done(function (json) { 
 
    alert(json.query.search[0].title); 
 
}); 
 
    
 
    } 
 
}); 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="test" /> 
 
<input type="button" id="searchButton" value="Search" />

Смежные вопросы