$ .getJSONが結果を返さない

Question

私は結果を使ってwikipediaページを検索するための検索を可能にするページを作る必要があります。

関連する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)); 
     } 
    ); 
    }); 
}); 

私はこの警告を実行するために取得したら、私が含まれているURLにウィンドウを開くために、アラートを変更する必要がありますJSONデータでは、私はそれを得るときに私はその橋を渡ります。今のところ、JSONはまったく何もしていません。

Answer 1

はここで、あなたがそこに着くことは決してないだろう、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>