javascript - jQuery - ajax调用后恢复表单提交

Question

是否可以在 ajax 调用成功的情况下阻止表单提交然后重新提交相同的表单？

目前它达到了成功位，但它没有重新提交应该提交并将用户重定向到http://example.com网站的表单。

非常感谢您提前提供的任何帮助

如果无法以这种方式做到这一点，是否有另一种方法可以让它发挥作用？

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: $('form').attr('action'),
            type: 'post',
            data: $('form').serialize(),
            success: function(data) {
                if (data == 'true')
                {
                    $('form').attr('action', 'http://example.com');
                    $('form').unbind('submit').submit(); // mistake: changed $(this) to $('form') - Problem still persists though it does not resubmit and redirect to http://example.com
                }
                else
                {
                    alert('Your username/password are incorrect');
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
            }
        });
    });
});

编辑：

Stackoverflow 帖子检查了以下代码：

• $.ajax 调用后恢复表单提交
• 如何重新启用 event.preventDefault？

我只是想我会提到我也尝试过这段代码但无济于事。

var ajaxSent = false;
$(document).ready(function() {
    $('form').submit(function(e) {

        if ( !ajaxSent)
            e.preventDefault();

        $.ajax({
            url: $('form').attr('action'),
            type: 'post',
            data: $('form').serialize(),
            success: function(data) {
                if (data == 'true')
                {
                    alert('submit form');
                    ajaxSent = true;
                    $('form').attr('action', 'http://example.com');
                    $('form').submit();
                    return true;
                }
                else
                {
                    alert('Your username/password are incorrect');
                    return false;
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
                return false;
            }
        });
    });
});

我也尝试过这段代码，但没有任何运气。

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: $('form').attr('action'),
            type: 'post',
            data: $('form').serialize(),
            success: function(data) {
                if (data == 'true')
                {
                    $('form').attr('action', 'http://example.com');
                    $('form').unbind('submit').submit();
                    return true;
                }
                else
                {
                    alert('Your username/password are incorrect');
                    return false;
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
                return false;
            }
        });
    });
});

Answer 1

解决方案非常简单，涉及在 .ajax() 中添加 async 并将其设置为 false。此外，我重新编写了提交按钮的代码，而不是在 AJAX 成功通过时提交表单。

这是我的工作代码：

$(document).ready(function() {
    var testing = false;
    $('#btn-login').on('click', function() {
        $.ajax({
            url: $('form').attr('action'),
            type: 'post',
            data: $('form').serialize(),
            async: false,
            success: function(data) {
                if (data == 'true')
                {
                    testing = true;
                    $('form').attr('action', 'https://example.com');
                    $('form').submit();
                }
                else
                {
                    alert('Your username/password are incorrect');
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
            }
        });

        return testing;
    });
});

Answer 2

在整个代码中重新选择所有表单标签不是一个好习惯，如果页面上有多个表单怎么办？此外，您最好使用.on()和.off()与 jQuery 一起使用。

$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();

        // cache the current form so you make sure to only have data from this one
        var form = this,
            $form = $(form);

        $.ajax({
            url: form.action,
            type: form.method,
            data: $form.serialize(),
            success: function(data) {
                if (data == 'true')
                {
                    $form.attr('action', 'http://example.com').off('submit').submit();
                }
                else
                {
                    alert('Your username/password are incorrect');
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
            }
        });
    });
});

Answer 3

在一行中，您用于$('form')选择表单以更改其操作，但随后您用于$(this)尝试选择相同的表单。我猜想this回调函数内部不是您期望的那样，并且不是您的表单（可能是window对象）。

只需链接调用：

$('form').attr('action', 'http://example.com').unbind('submit').submit();