Wie bekommt man einen kurzen Textausschnitt und das Hauptbild von Wikipedia-Artikeln per API?

Ich versuche, einen einfachen Klon von Wikipedia zu erstellen, der es dem Benutzer ermöglicht, nach einem Betreff zu suchen, und dann 10 Ergebnisse anzuzeigen, die das Bild des Artikels und ein kurzes Textschnipsel enthalten. Ich konnte das von Benutzern bereitgestellte Suchfeld problemlos an meinen .ajax() Anruf übergeben. Aber jetzt kann ich die Bilder nicht mehr abrufen. Ich habe alle anderen Beiträge zu diesem Problem in StackOverflow gelesen, habe aber keinen Erfolg.Wie bekommt man einen kurzen Textausschnitt und das Hauptbild von Wikipedia-Artikeln per 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>

schätze ich jede Hilfe, die zur Verfügung gestellt werden kann.

Quelle

2016-02-26 Devon Deason

Sie können den Text und die Bilder in einer Anfrage abzurufen, versuchen Sie dies:

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

Quelle

2016-02-27 10:29:20 Termininja

Fantastisch, ich kann Ihnen nicht genug danken für diese! Ich muss meine Forschung über Generatoren machen. –

Ich weiß nicht, ob Wikipedia das json-Ergebnis geändert hat, aber es gibt kein Bild. – Gino

@Termininja Ich finde die Antwort, die ich hier wollte: http://StackOverflow.com/a/43039946/211324 "& prop = pageimages | pageterms & piprop = thumbnail & pithumbsize = 600" – Gino

Wie bekommt man einen kurzen Textausschnitt und das Hauptbild von Wikipedia-Artikeln per API?

Antwort

Verwandte Themen