需要帮助理解 .getJSON() 行为答案

【问题标题】：Need help understanding .getJSON() behavior需要帮助理解 .getJSON() 行为
【发布时间】：2016-04-28 07:26:14
【问题描述】：

我试图理解为什么 .getJSON() 调用在表单提交未被抑制时会引发错误。最初我认为表单提交可能意味着函数 wikiCall() 没有被启动。然而，正确的“wikiLink”[wikiCall() 的参数] 会在输入时提交表单时打印在控制台中，但这会导致 .getJSON() 失败。

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').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(); //.getJSON throws error if form submission is not suppressed
     }    
   });
});

function wikiCall(wikiLink) { 
  console.log(wikiLink); //prints the correct link even on form submit
  $.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); //shows error:error if form is submitted on enter
  });
}

【问题讨论】：

好吧，如果提交表单，页面会重新加载，并且 ajax 调用可能会成功，但是当页面重新加载时，附加到 DOM 中的任何内容都将丢失，并且再次明确，页面重新加载.
handle ajax error when a user clicks refresh的可能重复
在这里工作正常jsfiddle.net/oyu0qzmb 应该为每个新请求清空容器
问题中的代码应该是您实际询问的代码。您发布的代码确实禁止提交表单。
如果你检查你的网络标签，你可以看到请求被中止，这是预期的行为

标签： javascript jquery html api getjson

【解决方案1】：

因为 form 元素上的 action 属性是一个空字符串，通过提交表单，您实际上是在刷新页面，这会导致浏览器中止所有打开的 Ajax 请求，从而在离开之前触发错误处理程序这页纸。除非您的控制台在页面之间保留日志，否则错误消息应该只会在加载下一页之前出现一小段时间。

您的代码目前没有多大意义，如果您不希望启动浏览器的导航，则应始终阻止提交表单的默认行为。

【讨论】：

【解决方案2】：

为什么不直接从提交中发送请求。

$(document).ready(function() {
   $('form').on('submit', function(e) {
     e.preventDefault();
     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;
      wikiCall(link);
   });
});

function wikiCall(wikiLink) { 
  console.log(wikiLink); //prints the correct link even on form submit

  //clean the div before append the new result;
  $(".displayResults").html('');

  $.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); //shows error:error if form is submitted on enter
  });
}

这是一个工作示例，其中包含您的代码和表单提交，只需键入并按 Enter。 http://jsbin.com/hexoyocusa/edit?html,js,output

【讨论】：