本篇内容介绍了“jQuery+Ajax+PHP怎么实现弹出层异步登录”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
关于弹出层效果,我们继续使用本站helloweba上篇文章中写的弹出层插件-hwLayer。更多的灵活性体现在绑定弹出层上的表单提交按钮事件,然后进行ajax异步交互,最后局部刷新主页面,大家可以先看demo演示。阅读本文,您除了需要具备HTML5、CSS3、jQuery等前端知识外,还需要了解PHP甚至MySQL的相关知识。
由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源。
接着,我们在html主体部分放置触发弹出层的按钮链接,以及弹出层主体内容。以下是HTML主要代码:
点击弹出登录表单
用户登录
用户名:helloweba,密码:123
上述代码中,#result用来展示用户信息,实际应用中,我们要在主网页中显示登录后的用户名等相关信息。#hw-layer-login是弹出层内容,默认是不可见的,它包含了一个登录表单,相关CSS样式请大家参阅Bootstrap官网。
我们在点击页面中的链接或按钮后,会调用hwLayer插件,触发登录弹出层。先加载jQUery和hwLayer插件。
然后,调用hwLayer插件。
$(function(){
$('#form-btn').hwLayer({
width: 480,
tapLayer: false
});
});
现在,弹出层出来了,而关键的部分也来了,我们在填写好账号信息,点击登录后,会发生什么?很显然,作为表单提交事件,我们先要验证前端输入的合法性,这里我只是简单的验证输入不能为空的情况。然后提交Ajax,将用户名和密码内容提交给后端login.php来处理。login.php它会验证我们填写的账号信息是否正确,并且将处理的结果以json格式返回给前端。那么当前端收到登录成功的信息时,将登录结果用户名和登录时间显示在主页面#result上,即实现了大家常说的局部刷新效果,同时应该关闭弹出层。
$(function(){
$(".hwLayer-ok").on('click', function(event) {
event.preventDefault();
var user = $('#user').val();
var pass = $('#password').val();
if(user==''){
$('#msg').addClass('text-danger').text('用户名不能为空!');
return false;
}
if(pass==''){
$('#msg').addClass('text-danger').text('密码不能为空!');
return false;
}
$.ajax({
url: 'login.php',
type: 'POST',
dataType: 'json',
data: {username: user,password: pass},
beforeSend: function(){
$('#msg').addClass('text-success').text('正在登录...');
$(".hwLayer-ok").attr('disabled',true);
},
success: function(res){
if(res.code==1){ //登录成功
$('#result').html('欢迎您,' + res.username + ',登录时间:' + res.logintime);
$('#msg').removeClass('text-danger').addClass('text-success').text('登录成功!');
$('#hw-layer-login').hwLayer('close');
}else{
$('#msg').addClass('text-danger').text('用户名或密码错误!');
}
$(".hwLayer-ok").removeAttr('disabled');
}
});
});
});
以上的Ajax异步操作当然离不开我们后端PHP,当然后端语言你可以自己选。login.php接收前端post上来的用户名和密码,然后比对验证是否正确。这里我偷懒,定义好了用户名和密码,而实际应用中我们应该使用PHP去读取数据库如MySQL中的用户表,比对用户表中的信息,并且以json数据返回登录结果给前端,请看代码:
$username = stripslashes(trim($_POST['username']));
$password = stripslashes(trim($_POST['password']));
if($username=='helloweba' && $password=='123'){
$res['code'] = 1;
$res['username'] = $username;
$res['logintime'] = date('Y-m-d H:i');
}else{
$res['code'] = 0;
}
echo json_encode($res);
“jQuery+Ajax+PHP怎么实现弹出层异步登录”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!