JSONP ile Wikipedia API'ye erişme

Son birkaç gün boyunca kodumu çalıştırmaya çalışıyorum ama sorunu bulamıyorum.
Wikipedia sunucusu ile iletişim kurmak ve onların JSON API'larını almak istiyorum, böylece searchInput giriş değerine karşılık gelen öğelerin bir listesini oluşturabilirim.
JSONP'a bakıyorum, sonunda "& callback =?" Ekleyebilirim. API isteğime ve bunun işe yarayacağını. Şimdi, ekledim bile, iletişim hala olmayacak.
"#searchInput" girdisini işledikten sonra kod başlatılırken bir an için codepen.io konsolunun "adsız" olarak döndüğünü fark ettim. Belki de sorun benim için…. Ne yapmam gerektiği hakkında bir fikrin var mı?
kodumu link: kod html sürümünü tercih ederseniz http://codepen.io/nedsalk/pen/zqbqgW?editors=1010
(JQuery zaten "ayarlar" menüsünde etkinleştirilir)
:JSONP ile Wikipedia API'ye erişme

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title> Object Oriented JavaScript </title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script> 
</head> 

<body> 
<h1> Wikipedia viewer </h1> 
<a href="http://en.wikipedia.org/wiki/Special:Randompage" target="_blank">Go random! </a> 
<form> 
<input type="text" name="searchInput" id="searchInput" placeholder="Search Wikipedia" 
onkeydown = "if (event.keyCode == 13) 
    document.getElementById('submit-button').click()"/> 
<input type="submit" id="submit-button"/> 
</form> 
<div id="list"></div> 
<script> 
$(document).ready(function() { 

    $("#submit-button").on("click",function(){ 
     var input=$("#searchInput").val(); 
     $.getJSON('https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=' + encodeURIComponent(input) + '&prop=extracts&exlimit=10&exintro&exsentences=2&format=json&callback=?', 
      function(API){ 
       $("#list").empty(); 
       for (var id in API.query.pages) 
       {if(API.query.pages.hasOwnProperty(id){ 
        $("#list").html('<a target="_blank" href="http://en.wikipedia.org/?curid=' + id + '">' 
            +'<div id="searchList">' 
            + "<h2>" + id.title + "</h2>" 
            + "<br>" 
            + "<h3>" + id.extract + "</h3>" 
            + "</div></a><br>") 
       }} 

      }) 
     }) 
}) 
</script> 
</body> 
</html>

kaynak

2016-05-12 nedsalk

'& geri arama =' '' Burada ajax isteğinden sonra verileri alacaktır javascript fonksiyonu adı gelecektir, sen'? Bu fonksiyonu yaratmalı ve '' 'ismiyle değiştirmeli (jsonp https://en.wikipedia.org/wiki/JSONP –

@VelimirTchatchevsky No’yu okuyun, bu varsayılan geri çağırma yöntemini kullanacaktır –

Kodunuzdaki birkaç sorunları var :

formun, düğmeye değil click ait submit olaya kanca ve gönderimi durdurmak için event.preventDefault() kullanmalıdır.
Döndürülen nesnenin anahtarları arasında geçiş yapar ve temel özelliklere erişmek için anahtarları kullanmak yerine, bu dizelerin özelliklerine erişmeye çalışırsınız.
her döngüde html() değerini ayarladığınızda, yalnızca son öğe görünür olacaktır. Bunun yerine append() kullanmalısınız.

bu deneyin:

$("form").on("submit", function(e) { 
    e.preventDefault(); 
    var input = $("#searchInput").val(); 
    $.getJSON('https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=' + encodeURIComponent(input) + '&prop=extracts&exlimit=10&exintro&exsentences=2&format=json&callback=?', function(response) { 
     var pages = response.query.pages; 
     $("#list").empty(); 

     for (var id in pages) { 
      $("#list").append('<a target="_blank" href="http://en.wikipedia.org/?curid=' + id + '">' + 
       '<div id="searchList">' + 
       "<h2>" + pages[id].title + "</h2>" + 
       "<br>" + 
       "<h3>" + pages[id].extract + "</h3>" + 
       "</div></a><br>") 
     } 
    }); 
});

Working example

kaynak

2016-05-12 08:50:30

Çok teşekkürler, bu çalıştı!: D – nedsalk

Sorun değil, yardım için memnun –

JSONP ile Wikipedia API'ye erişme

cevap

İlgili konular