我正在尝试创建一个简单的Wikipedia克隆,允许用户搜索一个主题,然后显示10条结果,其中包含文章的图像和一小段文本。我已经能够.ajax()毫无问题地将用户提供的搜索字段传递给我的电话。但是现在我无法检索图像,我已经阅读了StackOverflow上有关此问题的所有其他文章,但没有成功。
.ajax()
$(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>
感谢您提供的任何帮助。
您可以在一个请求中检索文本和图像,请尝试以下操作:
$(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>