通过维基API实现维基百科查询功能

阅读量：5896 次

发布时间：2019-06-19

本文共 4329 字，大约阅读时间需要 14 分钟。

通过英文维基的免费API，可以实现对维基百科的搜索查询或者标题全文查询等，尝试了一下通过title实现全文查询，返回的结果是wikitext格式，暂时不知道该如何应用，所以仅实现了查询功能，可以返回最接近的10条信息的标题、摘要、图片及链接。

我的DEMO页：

如下图：

搜索结果：

HTML如下：

CSS就不贴了，JS如下：

$(function(){    (function(){        var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&origin=*&gsrsearch=';                // search函数，通过AJAX/wikiAPI得到响应信息        function search(url){            $.ajax({                url: url,                success:function(response){                    // 获取响应信息中的pageid                    var x=[];                    for (var pageid in response.query.pages) {                        x.push(pageid);                    }                    // 得到每个pageid的信息，包括搜索标题，摘要，链接，图片等                    $(x).each(function(index, el) {                        var page=response.query.pages[x[index]];                        var title=page.title;                        var extract=page.extract;                        var imgsrc="";                        try{                            imgsrc=page.thumbnail.source;                        }catch(e){}                        var listcontent="";                        if(imgsrc){                            listcontent="";                        }                        listcontent+=extract;                        var href="http://en.wikipedia.org/wiki/"+encodeURIComponent(title);                        var list=$(".searchresult ol li").eq(index);                        list.find('a').text(title).attr('href', href);                        list.find('p').html(listcontent);                    });                }            });        }        // 点击搜索按钮后触发        $(".searchbtn").click(function() {            var searchwhat=$(".inputbox").val();            if(searchwhat&&searchwhat!=="please input something"){                var searchurl=url+searchwhat;                search(searchurl);                // 动画效果                $(".logo img").fadeOut();                $(".searchbox").animate({marginTop:"5px"}, 400,function(){                    $(".searchresult").animate({height:"show"}, 600);                });            }else{                $(".inputbox").val("please input something").trigger('focus');            }        });        // 文本框获得焦点后触发        $(".inputbox").focus(function() {            $(this).select();            $(".searchbox").animate({marginTop:"300px"}, 400 ,function(){                $(".logo img").fadeIn();            });            $(".searchresult").stop(true,true).animate({height:"hide"}, 600);        }).keyup(function(event) {            // 按回车触发搜索            if (event.keyCode==13) {                $(".searchbtn").trigger('click');                $(".inputbox").blur();            }        });    })();});

关键点还是在于维基的API，关于维基API的信息，可以查看：

以及

我的DEMO页：

转载地址：http://rvxsx.baihongyu.com/

你可能感兴趣的文章