利用jQuery和Bootstrap从维基百科中生成或获取随机文章的教程

吴欣
246 阅读1分钟

维基百科有一个特殊功能，即随机文章。为了从维基百科生成或获取随机文章，我们可以在维基百科的URL中使用[[Special:Random/Namespace]] 。

如果我们在维基百科页面上按下Alt-Shift+X ，它就会刷新页面并显示一篇随机文章。在本教程中，我们将学习如何使用 jQuery和Bootstrap实现这些随机文章的功能，同时我们还将实现维基百科搜索。

让我们先检查一下代码：

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

		<title>Wikipedia Random Article Generator & Article Search</title>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-12 mt-5">
					<h1>Wikipedia Random Article & Article Search</h1>
				</div>
			</div>
			
			
			<div class="form-group row">
				<div class="col-12 mt-5">
					<input type="search" id="query" class="form-control" placeholder="Search for an article">
				</div>
				<div class="col-12 mt-4 text-center">
					<button type="button" id="submitBtn" class="btn btn-success">Submit</button>
				</div>
			</div>
			
			<div class="row text-center">
				<div class="col-12 mt-2">
					<a class="btn btn-danger" href="" onclick="window.open('https://en.wikipedia.org/wiki/Special:Random')">Click here to get random article</a>
				</div>
			</div>
			<div class="row mt-5" id="output">
				
			</div>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
		<script>
			$(document).ready(function(){
			
				$('#submitBtn').click(function(e) {
					let no_of_result = 10;
					let title = "";
					let w_url = "";
					
					
					$('#output').html('');
					
					let query = $('#query').val();
					let url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + query + "&prop=info&inprop=url&callback=?";
					
					if(query){ 
						$.getJSON(url, function(data){
							
							if( data.query.searchinfo.totalhits === 0){
								$('#output').append('<div class="card w-100 text-center pb-2"><div class="card-body">No record found.</div></div>');
							}else{
								
								no_of_result =  data.query.search.length >= no_of_result ? no_of_result : data.query.search.length;
								
								for( i=0; i<no_of_result; i++){
									console.log(data.query.search[i].title);
									
									title = data.query.search[i].title;
									w_url = title.replace(/ /g, "_");
									
									$('#output').append('<div class="card w-100 text-center mb-4"><div class="card-body"><a href="https://en.wikipedia.org/wiki/'+ w_url +'" target="_blank"><h5 class="card-title">'+title+'</h5></a>'+ data.query.search[i].snippet +'</div></div>');
								}
							}
						});
					}else{
						$('#query').focus();
					}
				});
			});
		</script>
	</body>
</html>

在上面的例子中，我们已经创建了一个链接，即随机文章。当有人点击它时，它将打开一个新的浏览器标签，里面有一个随机的维基百科文章。

<a class="btn btn-danger" href="" onclick="window.open('https://en.wikipedia.org/wiki/Special:Random')">Click here to get random article</a>

我们还添加了一个搜索文本框和提交按钮。如果我们输入一些关键词并点击提交按钮，它将显示如下的搜索结果。

在这里，我们将我们的搜索字符串与维基百科的URL连接起来，并将结果作为一个JSON对象来获取。在获取数据后，我们解析了结果并在预览窗口中显示。

let url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=" + query + "&prop=info&inprop=url&callback=?";
avatar
文章
阅读
粉丝