Question

过去几天我一直在努力让我的代码工作，但我找不到问题我想与维基百科服务器进行通信并获取他们的JSON API，以便我可以列出与searchInput的输入值相对应的项目。
我一直在研究JSONP，最后发现我可以添加“＆amp; callback =？”我的API请求，它应该工作。现在，即使我添加了它，通信仍然没有发生我注意到在处理“#searchInput”输入后初始化代码时，codepen.io上的控制台返回“无标题”片刻。也许问题出在我的...循环中。你知道我应该怎么做吗？我的代码链接：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>

Answer 1

您的代码中有几个问题：

您应该抓住表单的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>")
        }
    });
});

Working example

使用JSONP访问Wikipedia API

1 个答案: