Javascript 需要了解.getJSON（）行为的帮助吗

我试图理解当表单提交未被抑制时，.getJSON（）调用为什么会抛出错误。最初我认为表单提交可能意味着函数wikiCall（）没有被启动。然而，当表单在enter上提交时，控制台会打印正确的“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
  });
}

$（文档）.ready（函数（）{
$（'#searchText'）。按键（函数（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；
如果（e.which==13）{//if用户返回回车键
维基呼叫（链接）；
//e、 preventDefault（）；//.getJSON在表单提交未被抑制时抛出错误
}    
});
});
函数wikiCall（wikiLink）{
console.log（wikiLink）；//即使在表单提交时也打印正确的链接
$.getJSON（wikiLink，函数（搜索结果）{
for（var i=0；i
“+searchResults.query.pages[i].extract+”）；
$（“.displayResults”）。追加（
”）；
}
}).fail（函数（jqxhr、textStatus、error）{
警报（textStatus+”：“+错误）；//如果表单是在enter时提交的，则显示错误：错误
});
}

为什么不直接从submit发送请求呢

$（文档）.ready（函数（）{
$（'form'）。关于（'submit'，函数（e）{
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；
维基呼叫（链接）；
});
});
函数wikiCall（wikiLink）{
console.log（wikiLink）；//即使在表单提交时也打印正确的链接
//在追加新结果之前清除div；
$（“.displayResults”）.html（“”）；
$.getJSON（wikiLink，函数（搜索结果）{
for（var i=0；i
“+searchResults.query.pages[i].extract+”）；
$（“.displayResults”）。追加（
”）；
}
}).fail（函数（jqxhr、textStatus、error）{
警报（textStatus+”：“+错误）；//如果表单是在enter时提交的，则显示错误：错误
});
}

因为

表单

元素上的

操作

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

---

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

如果提交表单，则页面将重新加载，ajax调用可能会成功，但当页面重新加载时，添加到DOM中的任何内容都将丢失，再说一次，需要明确的是，页面会重新加载。这里可能重复的works fine应该会清空每个新请求的容器，尽管问题中的代码应该是您实际询问的代码。您发布的代码不禁止表单提交。如果您检查网络选项卡，您可以看到请求被中止，这是预期行为