重新提交时，jquery AJAX表单提交两次

Question

我有一个登录表单，它使用jquery进行登录/ regestration，并在登录时完美地工作，但在重新显示的情况下提交表单两次。 我正在使用的代码是。

$(document).on('click', '#button', function() {

    $("#loginform").submit(function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                if (data === 'success') {
                    if ($("#type").val() != "reset") {
                        $('#subheading').html($("#button").html() + ' was Successfull');
                    } else {
                        $('#subheading').html(' Email Sent Please Check your inbox...');
                    }
                    $('#subheading').css('color', "rgb(28, 184, 65)");
                    $("#loginform").fadeOut('slow');

                           //To Load page again
                           $.get('index.php').done(function(data){
                               document.write(data);
                               document.close();
                           }).fail(function(){
                               window.location.href = "index.php";
                           });

                } else if (data === '1') {
                    $('#subheading').html('Invalid Username');
                    $('#subheading').css('color', "rgb(202, 60, 60)");
                } else if (data === '2') {
                    $('#subheading').html('Invalid Password');
                    $('#subheading').css('color', "rgb(202, 60, 60)");
                } else {
                    $('#subheading').html(data);
                    $('#subheading').css('color', "rgb(202, 60, 60)");
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails 
                $('#subheading').html('Unable to Contact with Server Please Make You have a working internet connection or try again later');
                $('#subheading').css('color', "rgb(202, 60, 60)");
            }
        });
        e.preventDefault(); //STOP default action
        e.unbind(); //unbind. to stop multiple form submit.

    });
    $("#loginform").submit(); //Submit  the FORM
});

服务器在AJAX Call上成功登录/注册时回复success 。

虽然第一台服务器上的注册返回success并设置会话，但下一次返回already logged in消息

我的登录表单就在这里 。

删除$("#loginform").submit(); （第二行最后一行）注册工作，表单只提交一次，但登录提交甚至一次。

我能做的一个解决方案是在if($("#type").val() != "regestration")之前添加一个if($("#type").val() != "regestration") $("#loginform").submit(); 但它不是一个好的解决方案。

PS：有几个类似的问题，我已经花了一个小时搜索他们，但没有人帮助。

您可以使用用户名和密码作为“ 测试 ”进行测试。

Answer 1

我猜你是在考虑将它添加到文档点击处理程序上，两次注册提交处理程序。 我建议在单击处理程序之外移动表单的提交处理程序，这样它只会运行一次。

换一种说法：

$(document).on('click', '#button', function() {
    $("#loginform").submit(); //Submit  the FORM
});

$("#loginform").submit(function(e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data, textStatus, jqXHR) {
            if (data === 'success') {
                if ($("#type").val() != "reset") {
                    $('#subheading').html($("#button").html() + ' was Successfull');
                } else {
                    $('#subheading').html(' Email Sent Please Check your inbox...');
                }
                $('#subheading').css('color', "rgb(28, 184, 65)");
                $("#loginform").fadeOut('slow');

                       //To Load page again
                       $.get('index.php').done(function(data){
                           document.write(data);
                           document.close();
                       }).fail(function(){
                           window.location.href = "index.php";
                       });

            } else if (data === '1') {
                $('#subheading').html('Invalid Username');
                $('#subheading').css('color', "rgb(202, 60, 60)");
            } else if (data === '2') {
                $('#subheading').html('Invalid Password');
                $('#subheading').css('color', "rgb(202, 60, 60)");
            } else {
                $('#subheading').html(data);
                $('#subheading').css('color', "rgb(202, 60, 60)");
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            //if fails 
            $('#subheading').html('Unable to Contact with Server Please Make You have a working internet connection or try again later');
            $('#subheading').css('color', "rgb(202, 60, 60)");
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.

});