使用表单提交重定向进行延迟

Posted 2023-03-05

【中文标题】使用表单提交重定向进行延迟

【英文标题】：Making delay with form-submit-redirecting

【发布时间】：2019-04-23 01:43:29

【问题描述】：

我正在使用 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>

如何让服务器等待几秒钟，直到出现警报？ 正如你所看到的那样使用超时没有用。

谢谢

【问题讨论】：

相关***.com/questions/951021/…

【参考方案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() 的更多信息。另外，关于 deferred 或 Promises 的更多信息。 javascript 从 jQuery 的发展方式中吸取了一些教训，并添加了一种设置动作的方法，该动作可能需要一些不确定长度的延迟——通常与服务器对话。

Javascript 给了我们一个 Promise，这很像在餐馆下订单。你把你的单子放进去，然后你等着听到“Order UP!!”。那时，当您的饭菜准备好时，您的服务员会为您端上食物。如果订单出现严重错误（比如大量使用培根），订单仍然会完成，但会出现错误，此时您的女服务员会过来告诉您。

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

我真心推荐阅读有关 Promises 的 MDN 文档，尤其是 fetch(...)。

【讨论】：

你能解释一下延期吗？

我认为更新了我的帖子以包含一个非常全面的描述。