Accesso all'API di Wikipedia con JSONP

Ho cercato per gli ultimi giorni di far funzionare il mio codice, ma non riesco a trovare il problema.
Voglio fare comunicazione con il server di Wikipedia e ottenere la loro API JSON in modo da poter creare un elenco di elementi corrispondenti al valore di input di searchInput.
Ho cercato JSONP, trovando alla fine che posso aggiungere "& callback =?" alla mia richiesta API e che dovrebbe funzionare. Ora, anche se l'ho aggiunto, la comunicazione non sta ancora accadendo.
Ho notato che la console su codepen.io restituisce "senza titolo" per un momento durante l'inizializzazione del codice dopo l'elaborazione dell'input "#searchInput". Forse il problema è nel mio per ... in loop. Hai idea di cosa dovrei fare?
Il link al mio codice: http://codepen.io/nedsalk/pen/zqbqgW?editors=1010
(JQuery è già attivato nel menu "Impostazioni")
Se si preferisce l'edizione .html del codice:Accesso all'API di Wikipedia con JSONP

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

fonte

2016-05-12 nedsalk

'& callback =' la '' qui sta per il nome di una funzione javascript che riceverà i dati dopo la richiesta AJAX, si'? Avremo bisogno di creare quella funzione e sostituire '?' con il suo nome (leggi su jsonp https://en.wikipedia.org/wiki/JSONP –

@VelimirTchatchevsky No, questo userebbe il metodo di callback predefinito –

Hai diversi problemi nel codice :

si dovrebbe agganciare al submit caso di forma, non il click del pulsante, e utilizzare event.preventDefault() per interrompere la presentazione.
si esegue un ciclo attraverso le chiavi dell'oggetto restituito e si tenta di accedere alle proprietà di tali stringhe, invece di utilizzare le chiavi per accedere alle proprietà sottostanti.
si imposta il html() in ogni ciclo, quindi solo l'elemento finale sarà visibile. Dovresti usare invece append().

Prova questo:

$("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

fonte

2016-05-12 08:50:30

Grazie mille, questo funzionato!: D – nedsalk

Nessun problema, felice di aiutare –

Accesso all'API di Wikipedia con JSONP

risposta

Problemi correlati