如何获取 API 维基百科文章的一小段文字和主图?
How to get a short snippet of text and the main image of Wikipedia articles by API?
我正在尝试创建一个简单的维基百科副本,允许用户搜索一个主题,然后显示 10 个包含文章图像和一小段文本的结果。我已经能够毫无问题地将用户提供的搜索字段传递给我的 .ajax()
调用。但是现在我无法检索图像,我已经阅读了 Whosebug 上有关此问题的所有其他帖子,但没有成功。
$(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>
我正在尝试创建一个简单的维基百科副本,允许用户搜索一个主题,然后显示 10 个包含文章图像和一小段文本的结果。我已经能够毫无问题地将用户提供的搜索字段传递给我的 .ajax()
调用。但是现在我无法检索图像,我已经阅读了 Whosebug 上有关此问题的所有其他帖子,但没有成功。
$(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>