維基百科API調用沒有返回結果

Question

最近我一直在玩API，還有一個我不知道如何弄清楚的錯誤。

這裏是JavaScript部分：

var userInput = ""; 

$("#searchButton").click(function() { 
    // get user input 
    var userInput = $("#userInput").val(); 
    // clear input 
    $('#userInput').val(""); 

    var api = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="; 

    alert(api + userInput); 

    $.getJSON(api + userInput, function(wikiData) { 
    alert("SUCCEEDED"); 
    }); 
}); 

基本上，當用戶輸入的東西，點擊搜索按鈕，警報（「成功」）顯示不出來，這意味着API調用沒有去通過。我試着調用不同的API（OpenWeatherMap API，着名的報價API等），他們工作得很好。這只是維基百科API不返回結果。

更新：當我在API調用後添加下面的代碼時，它返回「錯誤」。

.done(function() { 
    console.log("second success"); 
    }) 
    .fail(function() { 
    console.log("error"); 
    }) 
    .always(function() { 
    console.log("complete"); 
    }); 

Answer 1

檢查您的瀏覽器的開發者控制檯，同時運行您的代碼。 你會看到這樣的錯誤：

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?format=json&action=query&generator=searc …&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=mudit. No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決方法：使用jsonp。這裏是一個例子：

$("#searchButton").click(function() { 
    console.log('click'); 

    var api = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=mudit"; 


    $.ajax({ 
     type: 'GET', 
     url: api, 
     async: false, 
     contentType: "application/json", 
     dataType: 'jsonp', 
     success: function(data){ 
      console.log(JSON.stringify(data)); 
     } 
    }); 
});