<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="-T.K.-">
<meta name="copyright" content="-T.K.-">
<title>Wiki Query Test</title>
<link href="https://cdn.bootcss.com/materialize/1.0.0-rc.1/css/materialize.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/materialize/1.0.0-rc.1/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<!-- ↑ 这上面的那些不用管~ ↑ -->
<input class="query" type="text" placeholder="word to query">
<button class="q btn">Query</button>
<h3 class="title"></h3>
<p class="extract"></p>
<script>
// 维基百科简介 API 的 URL 地址
url = 'https://en.wikipedia.org/w/api.php';
url += '?format=json&action=query&prop=extracts&exintro=&explaintext=&origin=*&titles=';
// 等待页面加载完毕
$(document).ready(function(){
// 按钮被点击后执行
$('.q.btn').click(function(){
$.post(url+$('.query').val(), function(data){ // 将输入框中的内容添加到查询 URL 结尾的 titles 值中
console.log(data); // 在浏览器调试界面输出所有返回数据
$('.title').html(Object.values(data['query']['pages'])[0]['title']); // 从返回数据中获取信息，其中
$('.extract').html(Object.values(data['query']['pages'])[0]['extract']); // Object.values()[0] 用于获取字典
// 第一个 key 的内容
});
});
});
</script>
</div>
</body>
</html>
网友评论