过去几天我一直在努力让我的代码工作，但我就是找不到问题所在。
我想与维基百科服务器进行通信并获取他们的 JSON API，以便我可以制作与 searchInput 的输入值相对应的项目列表。
我一直在研究 JSONP，最后发现我可以添加“&callback=?”到我的 API 请求，它应该工作。
现在，即使我添加了它，通信仍然没有发生。
我注意到在处理“#searchInput”输入后初始化代码时，codepen.io 上的控制台暂时返回“untitled”。
也许问题出在我的 for...in 循环中。
你知道我该怎么做吗？
我的代码链接:http://codepen.io/nedsalk/pen/zqbqgW?editors=1010
(JQuery 已在“设置”菜单中启用)
如果您更喜欢代码的 .html 版本:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Object Oriented JavaScript </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script>
</head>
<body>
<h1> Wikipedia viewer </h1>
<a href="http://en.wikipedia.org/wiki/Special:Randompage" target="_blank">Go random! </a>
<form>
<input type="text" name="searchInput" id="searchInput" placeholder="Search Wikipedia"
onkeydown = "if (event.keyCode == 13)
document.getElementById('submit-button').click()"/>
<input type="submit" id="submit-button"/>
</form>
<div id="list"></div>
<script>
$(document).ready(function() {
$("#submit-button").on("click",function (){
var input=$("#searchInput").val();
$.getJSON('https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=' + encodeURIComponent(input) + '&prop=extracts&exlimit=10&exintro&exsentences=2&format=json&callback=?',
function(API){
$("#list").empty();
for (var id in API.query.pages)
{if(API.query.pages.hasOwnProperty(id){
$("#list").html('<a target="_blank" href="http://en.wikipedia.org/?curid=' + id + '">'
+'<div id="searchList">'
+ "<h2>" + id.title + "</h2>"
+ "<br>"
+ "<h3>" + id.extract + "</h3>"
+ "</div></a><br>")
}}
})
})
})
</script>
</body>
</html>
最佳答案
您的代码中有几个问题:
- 你应该 Hook 到表单的
submit事件，而不是按钮的click，并使用event.preventDefault()来停止提交。 - 您遍历返回对象的键并尝试访问这些字符串的属性，而不是使用键来访问底层属性。
- 您在每个循环中设置
html()，因此只有最后一个项目可见。您应该改用append()。
试试这个:
$("form").on("submit", function(e) {
e.preventDefault();
var input = $("#searchInput").val();
$.getJSON('https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=' + encodeURIComponent(input) + '&prop=extracts&exlimit=10&exintro&exsentences=2&format=json&callback=?', function(response) {
var pages = response.query.pages;
$("#list").empty();
for (var id in pages) {
$("#list").append('<a target="_blank" href="http://en.wikipedia.org/?curid=' + id + '">' +
'<div id="searchList">' +
"<h2>" + pages[id].title + "</h2>" +
"<br>" +
"<h3>" + pages[id].extract + "</h3>" +
"</div></a><br>")
}
});
});
关于javascript - 使用 JSONP 访问维基百科 API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37181524/