[英]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;
}
输入无效的凭据并首次提交表单后,它会按预期显示错误消息。 它还记录returning false
日志。
当我尝试输入正确的凭据并第二次提交表单时,它什么也不会做。
我还向AJAX调用添加了dataType: 'json'
。
因此,在将console.log()
放在代码中的某些位置之后,我注意到当我第二次提交表单时,它确实提交了表单,并且正在触发AJAX请求。 它只是不从PHP返回新的JSON字符串。
请在您的代码中进行一些更改。
从提交功能中删除keyup事件,并将其放置在外部。
如果在表单提交过程中出现错误(例如验证错误),则返回false(这会中断执行过程)。
最终设法使所有内容重新运行。
我注意到表单中的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;
});
}
感谢所有尝试提供帮助的人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.