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 帖子签出以下代码：

• Resume form submission after $.ajax call
• How to reenable 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();