location.href 不起作用（重新加载同一页面）

Question

我正在尝试使用 Jquery 在同一选项卡中加载页面，但页面会重新加载。因此，为了调试，我尝试在新选项卡中打开页面并且运行良好，我还尝试使用位置 href 打开像 Google 那样的常规页面，但页面只是重新加载。检查网络服务器日志我看到：::1 - - [13/Aug/2020:23:04:27 +0200] "GET /search.php?q=zagor HTTP/1.1" 200 10717::1 - - [13/Aug/2020:23:04:27 +0200] "GET /index.php HTTP/1.1" 200 52293因此，似乎在调用之后有一个对同一位置的调用覆盖了第一个位置，但我找不到它发生的位置。Jquery函数：$('.site-btn').on('click', function() {    var query = "search.php";    var qValue = $("input[id='q']").val();        if (qValue.length != 0) {        query = query + "?q=" + qValue;    }    var filterByValue = $("input[name='filterby']:checked").val();    if (filterByValue != null) {        query = query + "&by=" + filterByValue;    }    var filterLimitValue = $("input[name='filterlimit']:checked").val();    if (filterLimitValue != null) {        query = query + "&limit=" + filterLimitValue;    }    var filterOrderValue = $("input[name='filterorder']:checked").val();    if (filterOrderValue != null) {        query = query + "&order=" + filterOrderValue;    }    location.href = query;});

Answer 1

尝试传递event给函数，然后传递给event.preventDefault()它，就像这样 // 第一行，然后执行你的逻辑

$('.site-btn').on('click', function( event ) {

    event.preventDefault();

    // ...

    var query = "search.php";

    var qValue = $("input[id='q']").val();

    // ..

    location.href = query;

});

Answer 2

在您的 HTML 中，您有：

<form>

  <input type="text" id="q" placeholder="What comic are you searching?">

  <button class="site-btn">SEARCH</button>

</form>

a 中type的默认值为，因此当您单击它时，您将导致表单提交，从而导致页面重新加载。解决方案是将按钮指定为常规按钮：buttonformsubmit

<button type="button" class="site-btn">SEARCH</button>

另一个解决方案是删除<form>和</form>标签，因为您实际上并未在任何地方提交数据。然后你就可以不管它了，button因为它不会再出现了form，所以不会submit发生。