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