javascript - 通过表单提交重定向造成延迟

Question

我正在使用 Liveform 服务在我的网站中发送电子邮件。现在，每次您提交时，它都应该发出失败或成功消息提醒。

虽然显示失败消息有效，但显示成功消息却不起作用 - 因为我在它有机会显示之前就得到了重定向。所以我需要以某种方式推迟它。

这是我的代码:

$(document).ready(function() {
  $('#emailError').removeClass('active');
  $('#contact-form').submit(function(e) {
    var email = $('#email').val();
    console.log(email);
    var message = $('#message').val();
    console.log(message);

    if (!email || !message) {
      alertify.error('Please enter an email and a message');
      e.preventDefault();
      return;
    }
    // REDIRECT IN THIS POINT- > HOW TO DELAY HERE?
    setTimeout(function() {
      alertify.success('SENT SUCCESSFULLY!');
    }, 3000);
  });
});

<form action="https://liveformhq.com/form/911331a2-0d5e-4fbf-abb0-******" method="POST"
              accept-charset="utf-8" id="contact-form">
              <input type="email" placeholder="Email..." id="email" name="email" />
              <textarea rows="4" cols="50" placeholder="Message..." id="message" name="message"></textarea>
              <div class="actions"><button type="submit">Send</button></div>
            </form>

如何让服务器等待几秒钟直到警报出现？ 正如您所看到的，像我一样使用超时并不起作用。

谢谢

Answer 1

请注意，您实际上并没有进行提交——相反，您只是发现表单已提交。如果您想获得该提交的真正成功/失败状态，那么您可能需要劫持表单提交过程，并替换您自己的过程。

This is taken from a related question ，但适合您的使用。

$("#myform").submit(function(event) {
  // Hijack the form submit. We want to control this ourselves.
  event.preventDefault();

  // get the form field values
  var email = $('#email').val(),
      message = $('#message').val();

  // Do we have both an email and message? If not, alert and stop.
  if(!email.length>0 && !message.length>0){ 
    alertify.error("Please enter an email and message.");
    return false;
  }

  // I like to use defers :)
  // submit our post data, and include the form values as the POST body
  deferred = $.post("http://somewhere.com", { email: email, message: message });

  // Having hijacked the POST process, we have the success callbacks
  deferred.success(function () {
    alertify.success('SENT SUCCESSFULLY!');
  });

  // also, if the POST failed, we can notify the user of that.
  deferred.error(function () {
    // Handle any errors here.
  });
});

了解更多关于jQuery.post()的信息这里。另外，更多关于延迟或 promise 的内容。 Javascript 从 jQuery 的发展方式中吸取了一些教训，并添加了一种设置操作的方法，该操作可能会延迟一段不确定的长度——通常与服务器通信。

Javascript 给了我们一个 Promise，这很像在餐馆下订单。您放入单据，然后等待听到“订购!!”。那时，当您的饭菜准备好时，女服务员就会给您送来食物。如果订单出现严重错误(例如大量培根)，订单仍然会完成，但会出现错误，此时您的女服务员会过来告诉您这一点。

$.post(...) 使用 Promise。因此，我们可以为已完成的 Promise 添加一个 .success(...) 处理程序，并在 Promise 失败时添加一个 .error(...) 处理程序。

我强烈建议您阅读有关 Promises 的 MDN 文档，特别是 fetch(...)。