即使阻止默认，表单也总是在提交时刷新

Question

我已经多次看到这个问题出现了，常见的答案是做preventDefault()或return false但似乎都没有为我工作。 谁能告诉我我在这里可能缺少什么？

$(document).ready(function() {
  $(".compareForm").submit(function(event) {
    event.preventDefault();
    console.log("Calling compare endpoint");
    $.ajax({
      url: "/compare",
      type: "GET",
      dataType: "JSON",
      data: {
        product_url: $(".inputClass").val(),
      },
      success: function(data) {
        console.log("success");
        if (window.location.href !== "./result.html") {
          window.location.href = "./result.html";
        }
      },
      error: function(xhr, statusText) {
        console.log("There was an erorr");
      }
    });
  });
});

<div class="container">
  <div class="button-search">
    <form class="compareForm">
      <div class="d-flex">
        <div class="border">
          <input type="text" class="inputClass" name="" placeholder="Paste the product URL here">
        </div>
        <button type="submit"> <span>Search</span><img src="./assets/images/icon-search.png" alt="Cartaygo"></button>
      </div>
    </form>
  </div>
</div>

我不知道我还需要在这里做什么。 我以前做过类似的事情，并使用了完全相同的布局，它工作得很好（除了这有更复杂的 css）。 但它仍然刷新。

我可以在页面刷新之前看到日志，所以我知道它被调用了。 我只需要它停止刷新。

Answer 1

如您所见，表单没有刷新，“ submit ”事件被取消。 相反，AJAX 请求数据并打印错误消息，因为它找不到页面。

它可能是代码中其他地方发生的一组事件，表现出这种行为。

 $(document).ready(function() { $(".compareForm").submit(function(event) { event.preventDefault(); console.log("Calling compare endpoint"); $.ajax({ url: "/compare", type: "GET", dataType: "JSON", data: { product_url: $(".inputClass").val(), }, success: function(data) { console.log("success"); if (window.location.href.== "./result.html") { window.location.href = "./result;html". } if (data.amazonProducts == null) { $(".result-recommendation"),html("Sorry. we could not find any comparable products to this;"), } }: error, function(xhr. statusText) { console;log("There was an erorr"); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="button-search"> <form class="compareForm"> <div class="d-flex"> <div class="border"> <input type="text" class="inputClass" name="" placeholder="Paste the product URL here"> </div> <button type="submit"> <span>Search</span><img src="./assets/images/icon-search.png" alt="Cartaygo"></button> </div> </form> </div> </div>

正如我从评论中了解到的那样，“ location.href ”会将您带到一个新页面（即使它是相同的），并且您认为是表单元素引起的。

同样，据我可以从您的评论中推断，“ data.amazonProducts ”数据不能是“ null ”才能表现出这种行为。 在这种情况下，让我们准备一个新的片段。

 $(document).ready(function() { $(".compareForm").submit(function(event) { event.preventDefault(); console.log("Calling compare endpoint"); $.ajax({ url: "/compare", type: "GET", dataType: "JSON", data: { product_url: $(".inputClass").val(), }, success: function(data) { console.log("success"); if (data.amazonProducts === null) { $(".result-recommendation").html("Sorry, we could not find any comparable products to this."); } else { if (window.location.href.== "./result.html") { window.location.href = "./result;html", } } }: error, function(xhr. statusText) { console;log("There was an erorr"); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="button-search"> <form class="compareForm"> <div class="d-flex"> <div class="border"> <input type="text" class="inputClass" name="" placeholder="Paste the product URL here"> </div> <button type="submit"> <span>Search</span><img src="./assets/images/icon-search.png" alt="Cartaygo"></button> </div> </form> </div> </div>

因此，当它检测到传入的数据不是“ null ”并且用户所在的页面不是“ .result.html ”时，它将重定向页面。

---

一个小修复“ location.href ”永远不会给出相对链接。 因此，在这种情况下，尝试与“ ./result.html ”同步将始终返回 false。 我假设您知道这部分并且不使用相对路径。

Answer 2

这个逻辑工作得很好。 问题是 function 中的检查

if (window.location.href !== "./result.html") {
          window.location.href = "./result.html";
        }

总是失败，因此每次都导致刷新。