如何通过API获取简短的文本片段和维基百科文章的主要图像？ [英] How to get a short snippet of text and the main image of Wikipedia articles by API?
本文介绍了如何通过API获取简短的文本片段和维基百科文章的主要图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个维基百科的简单克隆，允许用户搜索主题，然后显示包含文章图像和一小段文本的10个结果。我已经能够将用户提供的搜索字段传递给我的 .ajax（）调用，没有任何问题。但是现在我无法检索图像，我已经阅读了有关此问题的StackOverflow上的所有其他帖子，但没有成功。
I'm trying to create a simple clone of Wikipedia that allows the user to search for a subject, and then display 10 results that contain the article's image and a short snippet of text. I've been able to pass the user supplied search field to my .ajax() call with no problem. But now I'm unable to retrieve the images, I've read all the other posts on StackOverflow regarding this problem, but have no success.
$(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>
感谢您提供的任何帮助。
I appreciate any help that may be provided.
推荐答案
您可以在一个请求中检索文本和图像，试试这个：
You can retrieve the text and the images in one request, try this:
$(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>
这篇关于如何通过API获取简短的文本片段和维基百科文章的主要图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
