$.getJSON 不返回结果

Question

我需要创建一个页面，允许用户搜索以获取包含其结果的维基百科页面。

相关的 HTML 是：

<form class='search-form' onsubmit='return false'>
<input class='search-input' id="search-input" type="text" />
<button class='btn search-btn'><i class="fa fa-search" aria-hidden="true"></i></button>
</form>

JS是：

$(document).ready(function() {
$(".search-btn").on("click", function() {
$.getJSON(
"https://en.wikipedia.org/w/api.php?action=opensearch&search=te&format=json",
function(data) {
alert(JSON.stringify(data));
}
);
});
});

运行此警报后，我需要更改警报以打开一个窗口，其中包含 JSON 数据中包含的 URL，但当我到达它时，我将越过该桥。目前，JSON什么都不做。

Answer 1

下面介绍如何向维基百科发出返回JSONP的请求，这使得在没有CORS标头的情况下执行跨源请求成为可能。

function getWiki(query) {
return $.ajax({
url: 'https://en.wikipedia.org/w/api.php',
data: {
format: 'json',
action: 'opensearch',
search: query
},
jsonp: "callback",
dataType: 'jsonp'
});
}
$('.search-form').on('submit', function(e) {
e.preventDefault();
var q = $('#search-input').val();

getWiki(q).done(function(data) {
console.log(data);
}).fail(function(err) {  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='search-form'>
<input class='search-input' id="search-input" type="text" />
<button class='btn search-btn'>Search</button>
</form>