Comment obtenir un court extrait de texte et l'image principale des articles Wikipedia par API?

J'essaie de créer un simple clone de Wikipédia qui permet à l'utilisateur de rechercher un sujet, puis affiche 10 résultats qui contiennent l'image de l'article et un court extrait de texte. J'ai pu passer le champ de recherche fourni par l'utilisateur à mon appel .ajax() sans problème. Mais maintenant, je ne peux pas récupérer les images, j'ai lu toutes les autres publications de StackOverflow concernant ce problème, mais je n'ai pas réussi.

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

J'apprécie toute aide qui pourrait être fournie.

Vous pouvez récupérer le texte et les images dans une requête, essayez ceci:

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