Question

我的代码在表单第一次提交时按预期工作。我通过输入错误的凭据强制出错，它显示错误，一切正常。在这样做之后，如果我在第二次提交表单时输入正确的凭据，它应该登录。问题是，我的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();
            }

        }
    }
}

UPDATE：

我在AJAX中改变了成功函数中的第一个if()语句。它目前看起来像这样：

if(json.Error == 'Login') {

    $('#alert_error').show();
    $('#login_error').text(json.Message);

    $('#password').val("");

    console.log('returning false');

    return false;
}

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

当我尝试输入正确的凭据并第二次提交表格时，它不会做任何事情。

我还在AJAX调用中添加了dataType: 'json'。

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

Answer 1

请在代码中进行一些更改。

从提交功能中删除keyup事件并将其放在外面。
如果在表单提交过程中出现错误，例如验证错误，则返回false（它会中断执行过程）。

Answer 2

最后设法让一切恢复正常。

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

所以，我创建了一个简单的javascript函数，它将AJAX请求发送到另一个PHP文件，该文件将令牌更改为新的有效文件。

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

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

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

UPDATE：

2 个答案: