AJAX在第二次表单提交后返回整个网页-JQuery


AJAX returns whole web page after 2nd form submit - JQuery

我的代码在表单第一次提交时按预期工作。我输入了错误的凭据,结果显示了一个错误,一切都很好。这样做之后,如果我在第二次提交表单时输入了正确的凭据,它应该会让我登录。问题是,我的AJAX调用中的data在第二次提交后包含了整个网页,而不是JSON字符串。

我使用以下代码(JS):

$(document).ready(function() { 
    $('form').submit(function(event) {
        var $u = $('#rnumber').val(),
            $p = $('#password').val(),
            $t = $('#token').val(),
            $s = $('#source').val(),
            $key = false;
        var $r = $('#remember:checked').length > 0;
        if(!$u) {
            // Add Error
            $('#alert_error').show();
            $('#login_error').text('Relatienummer is verplicht!');
            $key = true;
            $('#input_rnumber').addClass('has-error');
            // Check if input has been filled
            $( "#rnumber" ).keyup(function() {
                $('#input_rnumber').removeClass('has-error');
                $('#alert_error').hide();
                $key = false;
            });
        } else if(!$p) {
            $('#alert_error').show();
            $('#login_error').text('Wachtwoord is verplicht!');
            $key = true;
            $('#input_pass').addClass('has-error');
            // Check if input has been filled
            $( "#password" ).keyup(function() {
                $('#input_pass').removeClass('has-error');
                $('#alert_error').hide();
                $key = false;
            });
        }
        if(!$s) {
            $s = null;
        }
        event.preventDefault(event);
        if($key == false) {
            $.ajax({ 
                url: '/cp/login.php',
                data: {u: $u, p: $p, t: $t, r: $r, s: $s},
                type: 'post',
                success: function(data) {
                    console.log(data);
                    data = data.substring(data.indexOf("{"));
                    var json = JSON.parse(data);
                    console.log(json);
                    if(json.Error == 'Login') {
                        $('#alert_error').show();
                        $('#login_error').text(json.Message);
                        $('#password').val("");
                        // Check if input has been filled
                        $( "#password" ).keyup(function() {
                            $('#alert_error').hide();
                        });
                    } else if(json.Error == 'Membership') {
                        $('#alert_error').show();
                        $('#login_error').html(json.Message);
                        $('#password').val("");
                    } else if(json.Redirect) {
                        $('#loading').show();
                        var counter = 5;
                        var interval = setInterval(function() {
                            counter--;
                            $('#loading_text').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> Je word doorgestuurd in ' + counter + ' seconden.');
                            if (counter == 5) {
                                clearInterval(interval);
                            }
                        }, 1000);
                        setTimeout(function(){
                            window.location.replace("http://" + document.location.hostname + "/" + json.Redirect);
                        }, 5000);
                    } else if(json.Success == 'Dashboard') {
                        $('#loading').show();
                        $('#loading_text').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> Je word ingelogd...');
                        setTimeout(function(){
                            window.location.replace("dashboard");
                        }, 2000);
                    } else if(json.Success == 'Admin') {
                        $('#loading').show();
                        $('#loading_text').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> Je word ingelogd...');
                        setTimeout(function(){
                            window.location.replace("http://" + document.location.hostname + '/admin/');
                        }, 2000);
                    } else if(json.Success == 'Company') {
                        $('#loading').show();
                        $('#loading_text').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> Je word ingelogd...');
                        setTimeout(function(){
                            window.location.replace("http://" + document.location.hostname + '/company/dashboard');
                        }, 2000);
                    }
                }
            });
        }
    });
});

Login.php:

if(isset($_POST['u']) && isset($_POST['p']) && isset($_POST['t']) && isset($_POST['r'])) {
    if(Token::check(escape($_POST['t']))) {
        $rnumber = escape($_POST['u']);
        $pass = escape($_POST['p']);
        $remember = escape($_POST['r']);
        $source = escape($_POST['s']);
        if(substr( $rnumber, 0, 1 ) === "c") {
            $c = new Company();
            $cInfo = $c->findR($rnumber);
            $cInfo = $c->data();
            $login = $c->login($rnumber, $pass, $remember);
            if($login) {
                print json_encode(array("Success"=>"Company"));
                exit();
            } else {
                print json_encode(array("Error"=>"Login", "Message"=>"Er zijn onjuiste inloggegevens ingevoerd! Probeer het opnieuw!"));
                exit();
            }
        }
    }
}

更新:

我从AJAX更改了成功函数中的第一个if()语句。目前看起来是这样的:

if(json.Error == 'Login') {
    $('#alert_error').show();
    $('#login_error').text(json.Message);
    $('#password').val("");
    console.log('returning false');
    return false;
}

在我输入无效凭据并首次提交表单后,它会按预期显示错误消息。它还记录CCD_ 3。

当我尝试输入正确的凭据并第二次提交表单时,它不会起任何作用。

我还将dataType: 'json'添加到AJAX调用中。

因此,在将console.log()放在代码中的某些位置后,我注意到当我第二次提交表单时,它确实提交了表单,并且它正在触发AJAX请求。它只是不从PHP返回新的JSON字符串。

请对代码进行一些更改。

  1. 从提交函数中删除keyup事件并将其放置在外部。

  2. 当表单提交过程中出现类似验证错误的错误时,返回false(这会中断执行过程)。

终于让一切恢复正常。

我注意到我表格中的token没有改变。这当然是因为页面不会刷新。

因此,我创建了一个简单的javascript函数,它向另一个PHP文件发出AJAX请求,该文件将把令牌更改为新的有效令牌。

function token() {
    $.ajax({ 
        url: '/cp/_token.php',
        data: {token: true},
        type: 'post',
        success: function(output) {
            $('#token').val(output);
        }
    });
}
if(json.Error == 'Login') {
    $('#alert_error').show();
    $('#login_error').text(json.Message);
    $('#password').val("");
    token();
    // Check if input has been filled
    $( "#password" ).keyup(function() {
      $('#alert_error').hide();
      return false;
    });
}

感谢所有试图提供帮助的人!