Question

我正在使用Free Code Camp的wiki查看器并尝试找出api调用。我认为getjson和ajax相当，但也许我做错了。

所以起初我使用了这个getjson代码：

$.getJSON('http://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + search, 
function(api){
    console.log(api);
}, 'jsonp');

但它返回了此错误：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

然后我使用了具有相同网址的ajax：

$.ajax({
      url: 'http://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + search,
      dataType: 'jsonp',
      success: getWiki //just console logs the api
            });

这似乎回复了api电话。任何人都可以解释为什么getjson没有工作但是ajax呢？

Answer 1

您错过了强制callback=?执行JSONP请求所需的$.getJSON查询参数

$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
  action: 'query',
  list: 'search',
  format: 'json',
  srsearch: search
}, api => {
  // response handler
})

请参阅http://api.jquery.com/jquery.getjson/#jsonp

Answer 2

这是我的解决方案，我只使用 JavaScript

留下了替代方案

注意我在网址中添加了这个&origin=* param，使其能够使用原始的jQuery代码。

var search = 'php';
var searchURL = 'https://en.wikipedia.org/w/api.php?action=query&format=json&generator=search&origin=*&gsrsearch=' + search;

// Using JSON
$.getJSON(searchURL, function(data){
    var read = JSON.stringify(data);
    console.log('Using jQuery: ' + read);
}, 'jsonp');

// Using JavaScript
var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status == 200) {
      callback(null, xhr.response);
    } else {
      callback(status);
    }
  };
  xhr.send();
};

getJSON(searchURL, function(err, data) {
  if (err != null) {
    alert('Something went wrong: ' + err);
  } else {
    var read = JSON.stringify(data);
    console.log('Using JavaScript: ', read);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么.getjson不起作用，但.ajax呢？

2 个答案: