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

Question

我有这个简单的形式：

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

就我而言，该操作将失败。 但这是否可能是有效的操作，但是用户遇到了连接错误？

是否生成了其他Javascript事件，或者这超出了我的控制范围？

Answer 1

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

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

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

// Add a listener to the submit event
myForm.addEventListener('submit', function (e) {
    var 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();

    var 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
    });

Answer 2

如果使用Ajax提交，则可以通过响应头获得它。 看一下这个插件：

http://malsup.com/jquery/form/#ajaxForm

这将对您有很大帮助，因为它已经存在方法错误 。