Jak uzyskać krótki fragment tekstu i główny obraz artykułów Wikipedii według interfejsu API?

Próbuję stworzyć prosty klon Wikipedii, który umożliwia użytkownikowi wyszukiwanie tematu, a następnie wyświetla 10 wyników zawierających obraz artykułu i krótki fragment tekstu. Byłem w stanie przekazać pole wyszukiwania dostarczone przez użytkownika do mojego połączenia .ajax() bez problemu. Ale teraz nie mogę odzyskać obrazów, przeczytałem wszystkie inne posty dotyczące StackOverflow dotyczące tego problemu, ale nie udało się.Jak uzyskać krótki fragment tekstu i główny obraz artykułów Wikipedii według interfejsu API?

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

Doceniam jakiejkolwiek pomocy, które mogą być świadczone.

Źródło

2016-02-26 Devon Deason

można odzyskać tekst i obrazy w jeden wniosek, spróbuj tego:

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

Źródło

2016-02-27 10:29:20 Termininja

Fantastyczny, nie mogę ci dziękować za to! Muszę zrobić moje badania na temat generatorów. –

Nie wiem, czy Wikipedia zmieniła wynik json, ale nie ma obrazu. – Gino

@ Termininja Znajduję odpowiedź, której szukałem tutaj: http://stackoverflow.com/a/43039946/211324 "& prop = pageimages | pageterms & piprop = thumbnail & pithumbsize = 600" – Gino

Jak uzyskać krótki fragment tekstu i główny obraz artykułów Wikipedii według interfejsu API?

Odpowiedz

Powiązane problemy