javascript - $.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 header 的情况下执行跨源请求

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>