¿Cómo obtener un pequeño fragmento de texto y la imagen principal de los artículos de Wikipedia por API?

Question

Feb 26, 2016, 11:54 PM

¿Cómo obtener un pequeño fragmento de texto y la imagen principal de los artículos de Wikipedia por API?

Estoy tratando de crear un clon simple de Wikipedia que permita al usuario buscar un tema y luego mostrar 10 resultados que contengan la imagen del artículo y un breve fragmento de texto. He podido pasar el campo de búsqueda proporcionado por el usuario a mi.ajax() Llame sin problema. Pero ahora no puedo recuperar las imágenes, he leído todas las otras publicaciones en StackOverflow con respecto a este problema, pero no tengo éxito.

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

Agradezco cualquier ayuda que se pueda proporcionar.