javascript - API调用后如何动态追加数据到网页？

Question

我正在尝试创建一个网页，根据用户输入，该网页返回维基百科的结果列表。我已经收到对维基百科 API 的调用，工作正常，但是当我尝试将数据附加到我的网页时，它会闪烁一瞬间，然后消失。我怀疑这与事件处理程序有关，但我尝试了几种替代方法，但没有运气。我也查看了 SO 和整个网络，但找不到解决方案。这是我的代码:

var results = [];

$("#search").on("keydown", "#searchinput", function(event) {
  if (event.key === "Enter") {
    var searchParameter = encodeURIComponent(this.value);
    var link = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchParameter + "&limit=10&namespace=0&format=json&origin=*";

    $.getJSON(link, function(data) {
      for (var key in data) {
        results.push(data[key]);
      }
      for (var i = 0; i < results.length; i++) {
        for (var j = 0; j < results[i].length; j++) {
          $("#results").append(results[i][j]);
        }
      }
    })
  }
});

预先感谢您提供的任何帮助!如有必要，我很乐意提供更多信息。

Answer 1

对 $.getJSON 的调用应位于带有变量赋值的 if block 中。

var results = [];

$("#search").on("keydown", "#searchinput", function(event) {
  if (event.key === "Enter") {
    var searchParameter = encodeURIComponent(this.value);
    var link = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchParameter + "&limit=10&namespace=0&format=json&origin=*";

    $.getJSON(link, function(data) {
      for (var key in data) {
        results.push(data[key]);
      }
      for (var i = 0; i < results.length; i++) {
        for (var j = 0; j < results[i].length; j++) {
          $("#results").append(results[i][j]);
        }
      }
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="search">
  <input id="searchinput" type="text">
</div>
<div id="results">

</div>