如何通过API获取简短的文本片段和维基百科文章的主要图像？

我正在尝试创建一个维基百科的简单克隆，允许用户搜索主题，然后显示10个包含文章图像和一小段文本的结果。 我已经能够将用户提供的搜索字段传递给我的.ajax()调用，没有任何问题。 但是现在我无法检索图像，我已经阅读了有关此问题的StackOverflow上的所有其他post，但没有成功。

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

       
  Make it so 
 
      

我感谢您提供的任何帮助。

Answer 1

您可以在一个请求中检索文本和图像，请尝试以下操作：

 $(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 = $('
'); //get the article title pageElement.append($('
').append($('').attr('href', 'http://en.wikipedia.org/wiki/' + page.title).text(page.title))); //get the article image (if exists) if (page.thumbnail) pageElement.append($('').attr('width', 150).attr('src', page.thumbnail.source)); //get the article text pageElement.append($('
').text(page.extract)); pageElement.append($('
')); 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(); }); });
 

        
  Search