jQuery - 在ajax调用之后恢复表单提交 [英] jQuery - Resume form submit after ajax call

问题描述

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

Is it possible to stop a form from submitting and then resubmitting the same form from within the success of an ajax call?

目前它已成功但它不会重新提交应该提交的表单并将用户重定向到 http://example.com 网站。

At the moment it gets to the success bit but it doesn't resubmit the form which should submit and redirect the user to the http://example.com website.

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

Thank you very much for any help in advance

如果不可能这样做，是否还有另一种让它运作的方法？

If it's not possible to do it this way, is there another way of getting it to work?

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

Stackoverflow posts checked out for the code below:

• 在$ .ajax调用后恢复表单提交


• 如何重新启用event.preventDefault？

• Resume form submission after $.ajax call
• How to reenable event.preventDefault?

I只是想到我提到我也试过这个代码而没有用。

I just thought I'd mention I have also tried this code without avail.

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

我也试过这段代码而没有任何运气。

I have also tried this code without any luck as well.

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

推荐答案

解决方案很简单，涉及添加和设置异步到在.ajax（）中为false。另外，我已经重新编写了代码来处理提交按钮，而是在AJAX成功通过时提交了表单。

Solution was quite simple and involved adding and setting async to false in .ajax(). In addition, I have re-worked the code to work of the submit button instead which submits the form when the AJAX passes successfully.

这是我的工作代码：

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

这篇关于jQuery - 在ajax调用之后恢复表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！