javascript - 即使 URL 有效,.getJSON 也不会成功

标签 javascript jquery getjson

HTML

<body>
    <header>
        <div class="container-fluid">
            <h1>Wikipedia Viewer</h1>
            <form id="userInput">
                <input id="query" type="text" name="userInput" value="" placeholder="Search">
                <input id="submitBtn" type="submit" name="send" value="Click!">
            </form>
            <a id="randomArticle" href="https://en.wikipedia.org/wiki/Special:Random"><i class="fa fa-random fa-2x" aria-hidden="true"></i></a>
        </div>
    </header>
    <div class="results">
         </div>
</body>

</html>

Javascript

 var url = "https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&callback=?&search=";
    var userQuery = "";
    var html = "";
    $(document).ready(function () {
        $("#userInput").submit(function (e) {
            userQuery = document.getElementById("query").value;
            $.getJSON(url + userQuery, function (data) {
                for (var i = 0; i < data[1].length; i++) {
                    html = '<article><a href="' + data[3][i] + '"target="_blank"><h3>' + data[1][i] + '</h3><p>' + data[2][i] + '</p></a></article>';
                    $(".results").append(html);
                }
            });
        });
    });

当我到达 .getJSON 时,它不会成功,我已经测试了 URL,并且 JSON 出现在浏览器中,但使用 Jquery 的请求不起作用。

最佳答案

您需要做的就是添加一个 jQuery preventDefault()按钮单击事件的方法如下:

$(document).ready(function () {
    $("#userInput").submit(function (e) {
        e.preventDefault();
        userQuery = document.getElementById("query").value;
        $.getJSON(url + userQuery, function (data) {
            for (var i = 0; i < data[1].length; i++) {
                html = '<article><a href="' + data[3][i] + '" target="_blank"><h3>' + data[1][i] + '</h3><p>' + data[2][i] + '</p></a></article>';
                $(".results").append(html);
            }
        });
    });
});

关于javascript - 即使 URL 有效,.getJSON 也不会成功,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41269084/

相关文章:

javascript - 使用 JavaScript 获取 CSS 值

javascript - 迭代从数据库 Ruby/Javascript 检索的元素

jquery - 显示 css3 动画 2 次

javascript - Uncaught SyntaxError : Unexpected token::

java - 隐藏响应对象中的 JSON 字段

javascript - 如何根据输入参数数组执行函数内部的函数?

javascript - 如何在服务器端创建 Ext.Net 图表

javascript - 使用 .eq 查找某个类的第 n 个 div

Javascript 在不使用 ID、名称等的情况下将元素插入下一个表 td

javascript - jQuery .getJSON() 不解析所有对象