Question

我正在尝试使用API和JSON数据实现搜索功能，但由于某种原因，getJSON函数似乎无法正常工作。没有错误，前两个控制台日志在两个函数中都有效，但getJSON函数中的一个没有返回任何内容。即使我只使用没有getElementById功能的硬编码url，url也是有效的。我一直试图让代码在过去2天内工作，但我不知道问题是什么。我将不胜感激任何反馈。

<!DOCTYPE html>
<html>
<head>

  <title>World News</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style type="text/css">
  body {
  background-color: lightgrey;
  }

  </style>

</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">World News</a>
            </div>
    <form class="navbar-form navbar-right" action="">
                    <div class="input-group">
                    <input id="searchBar" type="text" class="form-control" placeholder="Search">
                        <div class="input-group-btn">
                            <button onclick="getText(); getJSON();" id="search_btn" class="btn btn-default" type="submit" href="#search">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </div>
                </div>
    </form>
        </div>
    </nav>

<div class="container-fluid text-center">
    <div class="row content tab-content">

        <div id="home" class="col-sm-8 text-left tab-pane fade in active">
                <h1 id="homeH0">Welcome to World News</h1>
                <p id="homeP0">Example of the welcoming text for the front of the page</p>
                <h4 id="h0"></h4>
                <p id="p0"></p>
                <h4 id="h1"></h4>
                <p id="p1"></p>
                <h4 id="h2"></h4>
                <p id="p2"></p>
                <h4 id="h3"></h4>
                <p id="p3"></p>
                <h4 id="h4"></h4>
                <p id="p4"></p>
            </div>
    </div>
</div>

<script type="text/javascript">

    var urlSer;

    function getText() {
        urlSer = 'https://newsapi.org/v2/everything?' +
             'q=' + document.getElementById("searchBar").value + '&' +
             'SortBy=popularity&' +
             'apiKey=459a144a981941ffa850e2b8c06c5b5f';

     console.log(urlSer);
    };

    function getJSON() {
        console.log(urlSer);
    $.getJSON(urlSer, function(json) {
        console.log(json);
        for (i = 0; i <= 4; i++) {
                document.getElementById('h' + i).innerHTML = json.articles['' + i].title;
                document.getElementById('p' + i).innerHTML = json.articles['' + i].description;
            }
        });
    };

</script>

</body>
</html>

Answer 1

将您的按钮从type="submit"更改为type="button"，以防止使用浏览器默认流程提交表单

由于表单提交

，目前您的网页可能正在重新加载

getJSON函数没有触发

1 个答案: