javascript - 如何按Enter键而不刷新页面？

我目前正在研究Wiki搜索项目，但遇到了一个问题，我一直无法在stackoverflow上找到答案。按下Enter键时，我试图执行XMLHttp请求，但是我无法使其正常工作。即使我尝试了keyup，keydown，submit和bind方法，它也会始终刷新页面。

HTML代码：

         <form class="form-search ngen-search-form" action="" method "get">
         <input type="text"name="q"id = "search-input"class="form-search
          input"placeholder="Search keywords..."dir="ltr">
         <span class="glyphicon glyphicon-search form-search-submit"
           id="search-trigger"aria-hidden="true"></span>
         </form>

JS代码：

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });
  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "http://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      console.log(xhr.responseText);
    };
    xhr.send();
  }
});

最佳答案

这是因为您的form正在提交。使用下面的代码来防止它。

$("form").submit(function(e){
    e.preventDefault();
});

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });

  $("form").submit(function(e){
        e.preventDefault();
    });

  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      $('#result').text(xhr.responseText);
    };
    xhr.send();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-search ngen-search-form" action="" method "get">
   <input type="text"name="q"id = "search-input"class="form-search
    input"placeholder="Search keywords..."dir="ltr">
   <span class="glyphicon glyphicon-search form-search-submit"
     id="search-trigger"aria-hidden="true"></span>
</form>
<div id="result"></id>

关于javascript - 如何按Enter键而不刷新页面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45094109/