通过英文维基的免费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/ ...

随机推荐

Mybatis的基本操作案列增加以及源码的分析（二）
一.构建一个框架的项目的思路首先我们先建立一个web项目,我们需要jar,mybatis-config.xml和studentDao.xml的配置随后就是dao.daoimpl.entity.的架构 ...
Atitit java集成内嵌浏览器与外嵌浏览器attilax总结
Atitit java集成内嵌浏览器与外嵌浏览器attilax总结 HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟 ...
JS高程5.引用类型（4）Array类型的各类方法
一.转换方法所有的对象都具有toLocaleString(),toString()和valueOf()方法.调用toString()方法会返回由数组中的每个值的字符串拼接而成的一个以逗号分隔的字符串 ...
android Intent介绍
Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组件,将 ...
Visual Studio 2013 Preview 高清多图先睹为快
Visual Studio 2013 Preview已经发布.大家可以下载试用了哦: 选项加载明显比之前版本要快很多.
Kali v2.1.2 for Raspberry Pi 3B
最新的下载地址是: https://www.offensive-security.com/kali-linux-arm-images/ 按照官网的说法是找不到树莓派版本的SHA1SUM和SHA1SUM ...
Python：版本升级
Linux 上安装的python版本是2.6.6,不能满足我运行软件的要求,所以对python进行升级.现在要了解MySQL Fabric,需要使用Python 2.7,所以只能对现有版本进行升级了. ...
hdfs以及hbase动态增加和删除节点
一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...
spi子系统之驱动SSD1306 OLED
spi子系统之驱动SSD1306 OLED 接触Linux之前,曾以为读源码可以更快的学习软件,于是前几个博客都是一边读源码一边添加注释,甚至精读到每一行代码,实际上效果并不理想,看过之后就忘记了.主 ...
[OFC]Mellanox发布首个200Gb/s硅光子设备
[OFC]Mellanox发布首个200Gb/s硅光子设备讯石光通讯网发布时间:2016/4/6 8:18:20 编者:iccsz 点击143次摘要:Mellanox日前在O ...

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

API:Main page以及API:Query/zh

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

随机推荐

热门专题