javascript - 使用 jQuery 提交 HTML 表单不起作用

Question

TL;DR: 我尝试使用 jQuery 提交表单，但它不起作用。

当用户提交表单时，我需要执行 ajax 调用。表单的操作位于我的网站之外，因此我需要在实际提交之前捕获表单提交。
这在某些时候确实有效，但现在不起作用，由于某种原因我无法弄清楚，我比较了它停止工作之前和之后的提交，并且没有代码更改，所以我不知道它可能是什么.
表单是常规的，有POST方法，一个 Action ，没什么奇怪的。
有什么想法吗？

这个想法是，当用户提交表单时，提交处理程序会阻止常规提交并执行 Ajax 调用。
当 AJAX 调用返回时，再次调用提交事件，这次处理程序不执行任何操作，也不会阻止常规提交，返回 true，因此它应该将表单提交到其操作 URL，但它没有发生。

<script>
var do_ajax_submit = true;

function manual_submit() {
    do_ajax_submit = false;
    $("form#lead_subscribe").submit();
}

$(function(){
    $("form#lead_subscribe").submit( function( ev )
    {
        var das = do_ajax_submit;
        if( do_ajax_submit )
        {
            do_ajax_submit = false;
            ev.preventDefault();

            $.ajax({
                url: "/someAjaxCall",
                method: "POST",
            })
            .always( function() {
                manual_submit();
            });
            return false;
        }
        return true;
    });
});
</script>

Answer 1

目前尚不清楚为什么代码应该可以工作，然后又停止工作。

有一件事是肯定的。通过使用原生的 formNode.submit 而不是 jQuery 的 $("form#lead_subscribe").submit(); 触发表单提交，提交将不会被重新拦截事件处理程序。因此，do_ajax_submit 标志是不必要的，并且 JavaScript 会显着清理。

$(function() {
    $("form#lead_subscribe").on('submit', function(ev) {
        ev.preventDefault();
        var formNode = this;
        $.ajax({
            url: "/someAjaxCall",
            method: "POST"
        })
        .always(function() {
            formNode.submit(); // native .submit() will not be re-intercepted by this submit handler.
        });
    });
});

这次清理也有可能解决问题。很难说。