javascript - 是否可以在 javascript 中检测表单提交失败？

Question

我有这个简单的表格:

<form action="www.faildomain.com">
    <input name="foo" value="bar">
    <button type="submit">Submit</button>
</form>

在我的例子中，操作将失败。但会不会是这是一个有效的操作，但是用户遇到了连接错误？

是否生成了不同的 Javascript 事件或操作系统超出了我的控制范围？

Answer 1

如果您不处理提交事件，这是您无法控制的。基本上，当您单击提交按钮时，您的浏览器将对您的“操作”URL 执行 HTTP POST 请求。

如果您想在发送之前检查输入的有效性，您需要做的是处理表单提交事件:submit。

const myForm = document.getElementById('my-form');

// Add a listener to the submit event
myForm.addEventListener('submit', function (e) {
    const errors = [];
    
    // Check inputs...

    if(errors.length) {
         e.preventDefault(); // The browser will not make the HTTP POST request
         return;
    }
});

但是，即使使用这段代码，您也永远不会知道用户是否有网络问题。

检查此类错误的唯一方法是使用 Ajax 对后端路由进行异步调用(它只是一个 HTTP POST 请求，异步调用)。例如，使用 jQuery:

$("#myForm").on("submit", function(e) {
    event.preventDefault();

    const data = {};

    // Get data from form...

    // Stop form from submitting normally
    $.post("www.faildomain.com", data)
      .done(function(data) {
          // No problem
      },
      .fail(function (jqXHR, textStatus) {
          // An error occured (the server responded with an error status, network issue, ...)
          // More information about the error can be found in jqXHR and textStatus
      },
      .always(function () {
          // This method is always executed whether there were an error or not
    });