Question

我正在尝试使用counter重定向到另一个页面。我希望在提交表单后开始重定向。提交表单后，我想重定向到另一个页面。

var count = 6;
var redirect = "https://www.google.com";

function countDown() {
  var timer = document.getElementById("timer");
  if (count > 0) {
    count--;
    timer.innerHTML = "This page will redirect in " + count + " seconds.";
    setTimeout("countDown()", 1000);
  } else {
    window.location.href = redirect;
  }
}

<form method="post">
  <p>
    <label>Name
      <input type="text" name="textfield">
    </label>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit"><br>
</form>

<span id="timer">
  <script type="text/javascript">countDown();</script>
</span>

</p>

Answer 1

您可以通过使用setInterval并进行检查直到其到达0进行重定向来获得计数器：

<form method="post">
  <p>
    <label>Name
  <input type="text" name="textfield">
  </label>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
    <br>
</form>

<span id="timer">This page will redirect in <span id="count"></span> second(s).</span>
<script type="text/javascript">
  var count = 6;
  var redirect = "https://www.google.com";
  var elem = document.getElementById('count');
  elem.innerText = count
  
  setInterval(() => {
    count--
    elem.innerText = count
    if (count == 0) {
      window.location.href = redirect;
    }
  }, 1000)
</script>

Answer 2

提交表单始终是对服务器的请求。您可以使用ajax来执行表单的提交，也可以稍后再计数并提交表单。

要防止用户点击按钮时提交表单，您可以阻止默认行为，例如：

$('input [type=submit]').on('click', function( event ) {
    event.preventDefault();
    // use your counter here
    // when counter hits 0 just submit the form with
    $('form').submit();
});

或使用ajax调用：

$('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        url: 'url/to/form/action',
        data: $(this).serialize(),
        method: "POST",
        success: function() {
            // start your counter
            // REDIRECT
        }
    });
});

第一种方法的问题是您只是在延迟表单提交。在第二种情况下，由于调用是异步的，因此您无法可靠地告知您何时将获得成功（或错误）响应。如果服务器直到那时都没有响应，这将导致计数器开始之前的延迟或计数器结束之后的延迟。

向柜台提交后重定向

2 个答案: