需要幫助來了解.getJSON（）行為

Question

我試圖了解為什么在不取消表單提交時.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
  });
}

Answer 1

您為什么不只是從提交發送請求。

 $(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，輸出

Answer 2

由於form元素上的action屬性為空字符串，因此通過提交表單，您可以有效地刷新頁面，這將導致瀏覽器中止所有打開的Ajax請求，從而在離開頁面之前觸發錯誤處理程序。 除非您的控制台在頁面之間保留日志，否則錯誤消息僅應在加載下一頁之前的很短時間內出現。

您的代碼目前沒有多大意義，如果您不希望啟動瀏覽器的導航，則應始終避免提交表單的默認行為。