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标头的情况下进行跨源请求

＆＃13;

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

＆＃13;

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

＆＃13;

$ .getJSON不返回结果

1 个答案: