Question

我正在尝试从维基百科API获取数据，但我无法获取数据。我认为问题在于URL，但我不知道。我更改了网址。我有网址

url =“https://en.wikipedia.org/w/api.php?&action=opensearch&search=”+ searchItem +“＆amp; format = json＆amp; orgin = *”;

url =“https://en.wikipedia.org/w/api.php?&action=opensearch&search=”+ searchItem +“＆amp; format = json＆amp; orgin = *＆amp; callback =？”;

$(function(){

    
    $('#search-click').click(function(){ 
    	var searchItem = document.getElementById('input-search').value;
    	console.log(searchItem);
    	console.log('clicked');

    	var url = "https://en.wikipedia.org/w/api.php?&action=opensearch&search=" + searchItem +"&format=json&callback=?";
    	$.ajax({
    		type:"GET",
    		url: url,
    		async: false,
    		dataType: "jsonp",
    		success: function(data){
    			console.log('Success.');
    		},
    		error: function(error){
    			console.log('Error. Cannot Load Data.');
    		}

    	});

    });
});

body, html{
	padding: 0;
	margin: 0;
	background-color: #16324f;
	color: #d6d9ce;
	text-align: center;
	width: 100%;
} 
h1{
	text-align: center;
	color: #d6d9ce;
	font-size: 50px;
}
h3{
	text-align: center;
	font-size: 30px;
	color: #d6d9ce;
	padding-bottom: 0;
	margin-bottom: 5px;
}
.center div{
	margin: 0 30%;
}
form{
	padding: 10px;
	margin: 10px 10px;
	display: inline-flex;
}
#search-click img{
	padding-left: 10px;
	vertical-align: middle;
}
#input-search{
	padding: 10px;
	width: 400px;
	color: #16324f;
}
input{
	border-radius: 25px;
}
#random-search img{
	margin: 0 50%;
}
footer{
	margin-top: 100px;
}
footer a{
	text-decoration: none;
	color: #d6d9ce;
	text-align: center;
	font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
	<title>Wikipedia Viewer</title>
	<link rel="stylesheet" type="text/css" href="wikipediaviewer.css">
</head>
<body>
	<header><h1>Wikipedia Viewer</h1></header>
	<div class="center">
		<div>
			<form id="form">
				<input id="input-search" type="text" name="search">
				<a id="search-click" href=""><img src="https://png.icons8.com/ios/51/f49d37/search-filled.png"></a>
			</form>
		</div>
		<div>
			<h3>Random Search</h3>
			<a id="random-search" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><img src="https://png.icons8.com/ios/51/d6d9ce/search-filled.png"></a>
		</div>
	</div>
	<div>
		 
		<ul id="wikipedia-links"></ul>
	</div>

	<footer>
		<a href="https://icons8.com">Icon pack by Icons8</a>
	</footer>

	<!-- JQUERY -->

     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="wikipediaviewer.js"></script> 
</body>
</html>

Answer 1

我尝试了没有UI的相同API，它运行正常。

如果我遗漏了某些内容，请告诉我，这是片段 -

$(function() {


  $('#search-click').click(function() {
    var searchItem = document.getElementById('input-search').value;

    var url = "https://en.wikipedia.org/w/api.php?&action=opensearch&search=" + searchItem + "&format=json&callback=?";
    $.ajax({
      type: "GET",
      url: url,
      async: false,
      dataType: "jsonp",
      success: function(data) {
        console.log(data);
      },
      error: function(error) {
        console.log('Error. Cannot Load Data.');
      }

    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="input-search" value="JavaScript" />
<input type="button" id="search-click" value="search" />

Wikipedia API不会提供任何数据

1 个答案: