Come ottenere un breve snippet di testo e l'immagine principale degli articoli di Wikipedia tramite API?

Sto provando a creare un semplice clone di Wikipedia che consente all'utente di cercare un soggetto e quindi di visualizzare 10 risultati che contengono l'immagine dell'articolo e un breve frammento di testo. Sono stato in grado di passare il campo di ricerca fornito dall'utente alla mia chiamata .ajax() senza problemi. Ma ora non riesco a recuperare le immagini, ho letto tutti gli altri post su StackOverflow relativi a questo problema, ma non ho avuto successo.Come ottenere un breve snippet di testo e l'immagine principale degli articoli di Wikipedia tramite API?

$(document).ready(function() { 
 
    var input = $('input'); 
 
    var button = $('button'); 
 

 
    //Create varialbe to store search field 
 
    var toSearch = ''; 
 

 
    //Api data: 
 
    var searchUrl = 'https://en.wikipedia.org/w/api.php'; 
 

 
    //.ajax() to get articles 
 
    var ajaxArticle = function() { 
 
     $.ajax({ 
 
     url: searchUrl, 
 
     dataType: 'jsonp', 
 
     data: { 
 
      action: 'query', 
 
      format: 'json', 
 
      prop: 'extracts', 
 
      exchars: '200', 
 
      exlimit: 'max', 
 
      explaintext: '', 
 
      exintro: '', 
 
      rawcontinue: '', 
 
      generator: 'search', 
 
      gsrsearch: toSearch, 
 
      gsrnamespace: '0', 
 
      gsrlimit: '10' 
 
     }, //End data: 
 
     success: function(json1) { 
 
      console.log(json1); 
 
     } 
 
     }); //End .ajax() 
 
    } 
 

 
    //.ajax() to get images 
 
    var ajaxImage = function() { 
 
     $.ajax({ 
 
     url: searchUrl, 
 
     dataType: 'jsonp', 
 
     data: { 
 
      'action': 'query', 
 
      'titles': toSearch, 
 
      'prop': 'pageimages', 
 
      'format': 'json' 
 
     }, //End data: 
 
     success: function(json2) { 
 
      console.log(json2) 
 
     } 
 
     }); //End .ajax() 
 
    } 
 

 
    //Auto complete search bar 
 
    input.autocomplete({ 
 
    source: function(request, response) { 
 
     $.ajax({ 
 
     url: searchUrl, 
 
     dataType: 'jsonp', 
 
     data: { 
 
      'action': "opensearch", 
 
      'format': "json", 
 
      'search': request.term 
 
     }, 
 
     success: function(data) { 
 
      response(data[1]); 
 
     } 
 
     }); 
 
    } 
 
    }); //End auto compelete 
 

 
    //Listen for click on button to store search field 
 
    button.click(function() { 
 
    toSearch = input.val(); 
 
    ajaxArticle(); 
 
    ajaxImage(); 
 
    }); //End click handler 
 
})

<html> 
 
<body> 
 
    <head> 
 
    <title>My Wikipedia Viewer</title> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> 
 
    </head> 
 
    <section> 
 
    <input type='text' value='' placeholder='Search for...'> 
 
    <button>Make it so</button> 
 
    </section> 
 
    <section class='articles'></section> 
 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<script type='application/javascript' src='js/script.js'></script> 
 
</html>

Apprezzo tutto l'aiuto che può essere fornito.

fonte

2016-02-26 Devon Deason

È possibile recuperare il testo e le immagini in una sola richiesta, provate questo:

$(document).ready(function() { 
 
    var articles = $('.articles'); 
 
    var input = $('input'); 
 
    var button = $('button'); 
 
    var toSearch = ''; 
 
    var searchUrl = 'https://en.wikipedia.org/w/api.php'; 
 

 
    var ajaxArticleData = function() { 
 
     $.ajax({ 
 
      url: searchUrl, 
 
      dataType: 'jsonp', 
 
      data: { 
 
       //main parameters 
 
       action: 'query', 
 
       format: 'json', 
 

 
       generator: 'search', 
 
        //parameters for generator 
 
        gsrsearch: toSearch, 
 
        gsrnamespace: 0, 
 
        gsrlimit: 10, 
 

 
       prop: 'extracts|pageimages', 
 
        //parameters for extracts 
 
        exchars: 200, 
 
        exlimit: 'max', 
 
        explaintext: true, 
 
        exintro: true, 
 

 
        //parameters for pageimages 
 
        piprop: 'thumbnail', 
 
        pilimit: 'max', 
 
        pithumbsize: 200 
 
      }, 
 
      success: function (json) { 
 
       var pages = json.query.pages; 
 
       $.map(pages, function (page) { 
 
        var pageElement = $('<div>'); 
 

 
        //get the article title 
 
        pageElement.append($('<h2>').append($('<a>').attr('href', 'http://en.wikipedia.org/wiki/' + page.title).text(page.title))); 
 

 
        //get the article image (if exists) 
 
        if (page.thumbnail) pageElement.append($('<img>').attr('width', 150).attr('src', page.thumbnail.source)); 
 

 
        //get the article text 
 
        pageElement.append($('<p>').text(page.extract)); 
 

 
        pageElement.append($('<hr>')); 
 

 
        articles.append(pageElement); 
 
       }); 
 
      } 
 
     }); 
 
    }; 
 

 
    input.autocomplete({ 
 
     source: function (request, response) { 
 
      $.ajax({ 
 
       url: searchUrl, 
 
       dataType: 'jsonp', 
 
       data: { 
 
        'action': "opensearch", 
 
        'format': "json", 
 
        'search': request.term 
 
       }, 
 
       success: function (data) { 
 
        response(data[1]); 
 
       } 
 
      }); 
 
     } 
 
    }); 
 

 
    button.click(function() { 
 
     articles.empty(); 
 
     toSearch = input.val(); 
 
     ajaxArticleData(); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>My Wikipedia Viewer</title> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> 
 
</head> 
 
<body> 
 
    <section> 
 
     <input type='text' value='' placeholder='Search for...'> 
 
     <button>Search</button> 
 
    </section> 
 
    <section class='articles'></section> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
</body> 
 
</html>

fonte

2016-02-27 10:29:20 Termininja

Fantastico, non posso ringraziare abbastanza per questo! Devo fare la mia ricerca sui generatori. –

Non so se Wikipedia abbia cambiato il risultato JSON ma non c'è immagine. – Gino

@Termininja trovo la risposta che volevo qui: http://stackoverflow.com/a/43039946/211324 "& prop = pageimages | pageterms & piprop = thumbnail & pithumbsize = 600" – Gino

Come ottenere un breve snippet di testo e l'immagine principale degli articoli di Wikipedia tramite API?

risposta

Problemi correlati