时间戳

首页 > 解决方案 > 即使阻止默认，表单也总是在提交时刷新

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

问题描述

我已经多次看到这个问题出现了，常见的答案是做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）。但它仍然刷新。

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

标签： javascripthtmljquery

解决方案

如您所见，表单没有刷新，“ 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。我假设您知道这部分并且不使用相对路径。

推荐阅读