如何通过API获取一小段文本和维基百科文章的主图像

How to get a short snippet of text and the main image of Wikipedia articles by API?

本文关键字：百科 文章 图像 获取 API 何通过 小段 文本      更新时间：2023-09-26

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

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

相关文章：