javascript - 页面将刷新而不是重定向

Question

我有一个如下所示的 HTML 文件:

<form onSubmit="getSearchResults()">
  <input id="search-query" type="text" placeholder="Search">
  <button onclick="getSearchResults()"></button>
</form>

<script type=text/javascript>
  var searchURL = "{% url 'search' %}" // I'm using Django, and this gets me the correct URL

  function getSearchResults(){
    var searchQuery = document.getElementById('search-query').value;
    if (searchQuery.length > 0)
        self.location.href = searchURL + '?' + searchQuery;
    else
        self.location.href = searchURL;
    return false;
  }

</script>

这个想法是，每次提交表单或单击按钮时，我希望页面重定向到不同的 URL。

现在，无论是提交表单还是单击按钮，页面都会重新加载。我在 Firefox 中查看了控制台，上面写着:

Navigated to http://localhost:8000/search
Navigated to http://localhost:8000/

所以我知道我的 URL 是正确的，并且我的代码可以正常工作，因为我被导航到正确的位置，但随后我又被导航到我所在的原始页面。

我也尝试过:

window.location.href
location.href

Answer 1

由于按钮位于表单中，因此它会提交表单。尝试在处理程序中添加 e.preventDefault() :

function getSearchResults(e) {
  e.preventDefault();
  var searchQuery = document.getElementById('search-query').value;
  if (searchQuery.length > 0)
    self.location.href = searchURL + '?' + searchQuery;
  else
    self.location.href = searchURL;
  return false;
}