我的代码在表单第一次提交时按预期工作。我输入了错误的凭据,结果显示了一个错误,一切都很好。这样做之后,如果我在第二次提交表单时输入了正确的凭据,它应该会让我登录。问题是,我的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字符串。
请对代码进行一些更改。
-
从提交函数中删除keyup事件并将其放置在外部。
-
当表单提交过程中出现类似验证错误的错误时,返回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;
});
}
感谢所有试图提供帮助的人!