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块中，并带有变量赋值。

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>

如何在API调用后动态地将数据附加到网页？

1 个答案: