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

我的DEMO页：https://zhangcuizc.github.io/My-FreeCodeCamp/

如下图：

搜索结果：

HTML如下：

<!DOCTYPE html>

<html>

<head>

    <title>wikisearch</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <link rel="icon" href="icon.ico">

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/main.js"></script>

</head>

<body>

    <div class="logo">

        <img src="enwiki.png">

    </div>

    <div class="searchbox">

        <div class="searchbar">

            <input type="text" name="searchcontent" value="" placeholder="search content" class="inputbox">

            <button class="searchbtn">Search</button>

        </div>

        <div class="searchresult">

            <ol>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

            </ol>

        </div>

        <div class="clearfix"></div>

    </div>

</body>

</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="<img src='"+imgsrc+"'>";

                        }

                        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的信息，可以查看：

API:Main page以及API:Query/zh

我的DEMO页：https://zhangcuizc.github.io/My-FreeCodeCamp/

通过维基API实现维基百科查询功能的更多相关文章

PHP调用API接口实现天气查询功能
天气预报查询接口API,在这里我使用的是国家气象局天气预报接口使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式根据地名查询各城市天气 ...
【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...
ArcGIS api for JavaScript 3.27 FindTask查询功能
在ArcGIS API中查询功能是经常使用的,常用的三个查询分别是FindTask,QueryTask,IdentifyTask.它们各自都有自己的特点. 查询功能分为属性查询和空间查询 FindTa ...
[Architecture Pattern] Repository实作查询功能
[Architecture Pattern] Repository实作查询功能范例下载范例程序代码:点此下载问题情景在系统的BLL与DAL之间,加入Repository Pattern的设计, ...
微信小程序+OLAMI(欧拉蜜)自然语言API接口制作智能查询工具--快递、聊天、日历等
微信小程序最近比较热门,再加上自然语义理解也越来越被人关注,于是我想赶赶潮流,做一个小程序试试.想来想去快递查询应该是一种比较普遍的需求. 如果你也在通过自然语言接口做点什么,希望我的这篇博客能帮到你 ...
arcgis api for js 地图查询
arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效 ...
Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图前端初始页面输入搜索信息页面点击查询结果页面环境介绍前端:vue 后端:springboot jdk:1.8及以上数据库:mysql 核心代码介绍 TypeCtrler .j ...
【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能
前言最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...
百度地图API 批量添加带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

（转）解决 ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务
下面操作默认在安装Oralce数据库的服务器上运行. 1)确保Oracle 基本服务都已启动 OracleDBConsoleorcl OracleOraDb11g_home1TNSListener O ...
关于MySQL数据库优化的部分整理
在之前我写过一篇关于这个方面的文章 <[原创]为什么使用数据索引能提高效率?(本文针对mysql进行概述)(更新)> 这次,主要侧重点讲下两种常用存储引擎. 我们一般从两个方面进行MySQ ...
php的http_build_query使用
http_build_query生成 url-encoded 之后的请求字符串 1.使用键值对,关联数组: <?php $data = array('foo'=>'bar', 'baz'= ...
Office 365使用情况调查不完全分析报告
感谢大家参与了9月13日在Office 365技术群(O萌)中发起的一个关于Office 365使用情况的调查,在一天左右的时间内,我们一共收到了67份反馈,其中绝大部分是在3分钟内提交的. 本次调查 ...
利用私有的API获得手机上所安装的所有应用信息（包括版本，名称，bundleID，类型）
MobileCoreService这个系统的库,里面有个私有的类LSApplicationWorkspace ,利用运行时可以获得私有类里面的方法,- (id)allInstalledApplicat ...
WWDC2016 观后杂感
WWDC2016已经落幕了,我没有熬夜看看的录播. 总的来说觉得还是比较兴奋的,因为苹果将更多的APi开发出来了,可以玩出更多花样了.
MYSQL离线安装
由于MySQL的广泛应用,MySQL的安装也就成了大家经常会碰到的问题.并且由于不是所有机器都可连接外网,所以MySQL的离线安装显得比较重要.而本文旨在介绍CentOS6.6下离线安装MySQL. ...
吐个槽：bose的售后真心差劲！愧对这个顶级音响产品！
400电话只提供周一到周五(中午有1个小时非服务时间),打进去就不厌其烦地告知你服务时间,你多按几个0,对方就直接把电话给你挂了!即使耐心等待它啰嗦完,哪怕只有0个人等待或1个人等待,你也是接不进去的 ...
华为手机浏览器不支持PUT提交方式的解决方案
最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...
Java 修饰符
Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符非访问修饰符修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class classNam ...

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

API:Main page以及API:Query/zh

通过维基API实现维基百科查询功能的更多相关文章

随机推荐

热门专题