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

在ajax调用成功后，是否可以停止表单提交，然后重新提交相同的表单

目前它已经成功了，但是它没有重新提交表单，表单应该提交并将用户重定向到网站

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

如果不可能这样做，有没有其他方法让它工作

$(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 posts已签出以下代码：

我只是想提一下，我也尝试过这个代码，但没有用

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

---

在一行中，您使用

$（'form'）

选择要更改其操作的表单，但随后使用

$（this）

尝试选择相同的表单。我猜回调函数中的

这个
不是您所期望的，它不是您的表单（可能是
窗口
对象）

只需将电话连锁：

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

在整个代码中重新选择所有表单标记不是一个好做法，如果页面上有多个表单怎么办？
另外，您最好在jQuery中使用
.on（）
和
.off（）

$(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');
            }
        });
    });
});

解决方案非常简单，涉及在.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;
    });
});

这很可能会无限地提交表单。首先ajax提交表单，一旦成功，它会再次通过相同的ajax，然后再次成功。。再说一遍。。再说一遍，为什么？在第二次提交表单之前，他们正在删除（试图删除）事件处理程序
submit
。@AnthonyGrist但在解除绑定后，会调用相同的处理程序，因为submit后面跟着它。不是吗？还是我错了？@SachinG你错了。当事件处理程序被解除绑定时，它就不存在了——它不能被任何东西调用。您可以发布自己的答案，但作为答案，而不是编辑原始问题$（这个）实际上应该是$（'form'），这是一个我在代码中纠正的错误，在我发布之前忘记在stackoverflow帖子中编辑它了。不要。关于链接，是的，我知道我可以一次完成所有的工作，我只是更喜欢分开做，这样更好overview@adamj老实说，代码在我看来是正确的。您可能需要调试它，查看AJAX请求返回的内容，查看触发的代码部分，等等。AJAX很好，没有问题。当它第一次运行.submit（）时，它会返回数据并点击成功按钮。然后，它应该将表单从submit中取消绑定（），然后重新提交表单，但重新提交从未发生过。默认情况下，通过提交表单，您会立即知道它是否起作用，但这不会发生。我将尝试一下.on（），看看这是否有帮助。关于不使用表单标签，您是对的，但是在这种情况下，页面上总是只有一个表单。如果是其他情况，我会在表单上添加ID属性并将其作为目标。即使添加ID，我仍然会缓存对象，只是为了性能和代码一致性。如果在任何输入上按enter键，会发生什么情况？它将提交破坏此逻辑的内容。@RubenArevalo是否禁用enter键，直到所有字段都填写完毕？如果表单中没有所需的所有数据，您为什么允许其他人提交表单？
async:false
在这种情况下并不重要。@KevinB“不重要”以何种方式？