如何通过API获得简短的文本片段和Wikipedia文章的主图像？

一尘不染

如何通过API获得简短的文本片段和Wikipedia文章的主图像？

ajax

我正在尝试创建一个简单的Wikipedia克隆，允许用户搜索一个主题，然后显示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>

感谢您提供的任何帮助。

阅读 305

2020-07-26

共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 = $('<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>

2020-07-26