$.getJSON() 调用抛出错误答案

【问题标题】：$.getJSON() call throwing error$.getJSON() 调用抛出错误
【发布时间】：2016-01-22 05:25:53
【问题描述】：

当通过条件语句调用父函数时，我无法弄清楚为什么 .getJSON 会引发错误。当 if 语句被注释掉时，似乎没有问题并且 .getJSON 被调用。但是，我希望用户完成他们的输入（按 Enter 表示）。

HTML

<div class="text-center searchBar">
  <form action="">
    <input type="text" id="searchText" />
  </form>
</div>

<div class="container displayResults"> </div>

Javascript：

$(document).ready(function() {
   $('#searchText').keyup(function(e) {
     var searchItem = $('#searchText').val();
     var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem;

     if(e.which == 13) { //if user returns enter key
      wikiCall(link);
     }    
   });
});

function wikiCall(wikiLink) {  
  $.getJSON(wikiLink, function(searchResults) {      
    for (var i = 0; i < searchResults.query.pages.length; i++) {
      $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>");
      $(".displayResults").append("<br>");
    }
  }).fail(function(jqxhr,textStatus,error){
    alert(textStatus+": "+error);
  });
}

【问题讨论】：

您可能想尝试禁用表单提交事件。 $('.searchBar form').on('submit', function(e) { e.preventDefault(); return false; }); 避免在用户按下回车时提交表单。在将数据附加到正文之前，还要检查响应是否具有 query 键。
@LucasFerreira 谢谢，避免在按下输入键时提交表单。
@fzxt .fail() 并没有给我太多帮助来破译错误是什么。显示的警报是：错误：错误

标签： javascript jquery html api getjson

【解决方案1】：

我测试了你的软件，我只犯了一个错误：keyup 而不是 keypress 加上停止传播。

下面是你的代码：

function wikiCall(wikiLink) {
  $.getJSON(wikiLink, function(searchResults) {
    for (var i = 0; i < searchResults.query.pages.length; i++) {
      $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>");
      $(".displayResults").append("<br>");
    }
  }).fail(function(jqxhr,textStatus,error){
    alert(textStatus+": "+error);
  });
}
$(function () {
  $('#searchText').keypress(function(e) {
    var searchItem = $('#searchText').val();
    var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem;

    if(e.which == 13) { //if user returns enter key
      wikiCall(link);
      e.preventDefault();
    }
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<div class="text-center searchBar">
    <form action="">
        <input type="text" id="searchText" />
    </form>
</div>

<div class="container displayResults"> </div>

键入字符时的事件顺序是： keydown 、 keypress 、 keyup 。

对于前两个事件，您可以阻止，而您不能阻止在 keyup 事件中键入的字符。

keyup 事件是你听的最后一个事件，你只能说：好的，这是我采取行动的角色，但我不能阻止这个角色的效果，比如表单提交。

当您键入新行时，三个事件的结果是：

keydown keyCode=13 which=13 charCode=0

keypress keyCode=13 which=13 charCode=13

keyup keyCode=13 which=13 charCode=0

【讨论】：

我对它们的处理方式是一样的：keyup、keypress、keydown。我很高兴我能够使用 keypress 抑制默认设置，但我很困惑为什么不能使用 keyup 来完成。
我在上面找到了自己问题的答案：keyup 在提交后被触发，因此无法取消。
@CodingerSK 我更新了答案：是的，在 keyup 上你不能停止表单提交。