Wie erhalte ich einen kurzen Textausschnitt und das Hauptbild von Wikipedia-Artikeln per API?

Question

Feb 26, 2016, 11:54 PM

Wie erhalte ich einen kurzen Textausschnitt und das Hauptbild von Wikipedia-Artikeln per API?

Ich versuche, einen einfachen Wikipedia-Klon zu erstellen, mit dem der Benutzer nach einem Thema suchen und anschließend 10 Ergebnisse anzeigen kann, die das Bild des Artikels und einen kurzen Textausschnitt enthalten. Ich konnte das vom Benutzer angegebene Suchfeld an mein @ übergebe.ajax()anruf ohne problem. Aber jetzt kann ich die Bilder nicht mehr abrufen. Ich habe alle anderen Posts auf StackOverflow zu diesem Problem gelesen, habe aber keinen Erfolg.

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

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