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>&nbsp; <input type="text" id="q" placeholder="What comic are you searching?">&nbsp; <button class="site-btn">SEARCH</button></form>a 中type的默认值为，因此当您单击它时，您将导致表单提交，从而导致页面重新加载。解决方案是将按钮指定为常规按钮：buttonformsubmit<button type="button" class="site-btn">SEARCH</button>另一个解决方案是删除<form>和</form>标签，因为您实际上并未在任何地方提交数据。然后你就可以不管它了，button因为它不会再出现了form，所以不会submit发生。