Question

我陷入困境。我正在为个人练习项目编写维基百科搜索工具，但我遇到了一个小错误。当用户在搜索栏中输入单词时，输入将存储到$.getJSON的数据参数中，然后响应将根据搜索栏中输入的单词返回标题和描述对象的数组。 $.getJSON函数将在指定的HTML中以列表格式显示5组标题及其描述。很简单，但问题是$.getJSON函数会显示措辞"undefined"，然后继续显示所需的标题和说明集。下面我列出了我的JS编码供您查看。此外，可以在我的codepen查看完整代码。

任何人都可以让我了解可能存在的问题。由于$.getJSON是异步的，这可能是问题所在，但我无法完全理解它。提前谢谢！

$("#search-word").on("keydown", function(event) {
if(event.keyCode == 13) {
  event.preventDefault();
  var input = {search: $(this).val()};
  getWikiInfo(input);
}
});//search end

function getWikiInfo(input) {
var wikipApi = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&callback=?";
var getWikipHtml = function(response) {
  console.log(response);
  var wikipHtml;
  for(var i = 1; i < 6; i++) {
    wikipHtml += '<div class="list"><h3>' + response[1][i] + '</h3><p>' + response[2][i] + '</p></div>';
  }
  $("#list-container").html(wikipHtml);
  }
$.getJSON(wikipApi, input, getWikipHtml);
}//getWikiInfo end

Answer 1

你需要做一些小改动。将wikipHtml初始化为空字符串，然后检查response[1][i]是否不是undefined。以下是更新后的代码：

var wikipHtml = '';
for (var i = 1; i < 6; i++) {
  if (response[1][i] !== undefined)
    wikipHtml += '<div class="list"><h3>' + response[1][i] + '</h3><p>' + response[2][i] + '</p></div>';
}

Answer 2

这种情况正在发生，因为您在添加wikipHtml之前没有对其进行初始化，但我强烈建议您使用正确的DOM操作，而不是使用字符串连接来构建HTML：

＆＃13;

$("#search-word").on("keydown", function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    var input = {
      search: $(this).val()
    };
    getWikiInfo(input);
  }
}); //search end

function getWikiInfo(input) {
  var wikipApi = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&callback=?";
  var getWikipHtml = function(response) {
    var content = [0, 1, 2, 3, 4, 5].map(function(i) {
      return $('<div class="list">')
        .append($('<h3>').text(response[1][i]))
        .append($('<p>').text(response[2][i]));
    });

    $("#list-container").html(content);
  }
  $.getJSON(wikipApi, input, getWikipHtml);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='search-word' type='text' />
<div id='list-container'></div>

＆＃13;

$ .getJSON返回undefined，然后返回请求的数据

2 个答案: