本文详细介绍如何使用jQuery结合Ajax与PHP实现异步弹出层登录功能。通过Bootstrap构建UI，利用hwLayer插件展示登录表单，前端校验后通过Ajax提交数据至后端login.php进行验证，最终实现局部刷新与弹出层关闭的完整交互流程。
异步弹出层登录功能概述
弹出层不仅用于展示页面信息，更常用于增强交互体验，例如展示表单。典型的场景是弹出登录表单，用户提交信息后，后台验证通过则关闭弹出层并在主页面局部刷新用户数据。本文将演示如何结合jQuery、Ajax和PHP实现这一异步登录效果。
效果展示 源码下载
HTML结构与资源引入
HTML结构
本例UI基于Bootstrap，并使用了jQuery插件，因此需预先加载相关资源，推荐使用CDN加速。
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="hwLayer.css"> 在HTML主体中放置触发弹出层的按钮及弹出层内容。以下是HTML核心代码：
<a href="#0" class="btn btn-danger btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">点击弹出登录表单</a>
<div id="result"></div>
<div class="hw-overlay" id="hw-layer-login">
<div class="hw-layer-wrap">
<button type="button" class="close hwLayer-close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="hw-layer-title">用户登录</h3>
<div class="row">
<form class="form-horizontal" action="login.php" method="post" id="login-form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
<input type="text" class="form-control" name="user" id="user" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-md-11 col-md-offset-1">
<button type="submit" class="btn btn-success hwLayer-ok">登录</button>
<span id="msg">用户名：helloweba，密码：123</span>
</div>
</div>
</form>
</div>
</div>
</div> 代码中#result用于展示用户信息，实际应用中需在此处显示登录后的用户名等数据。#hw-layer-login为弹出层主体，默认隐藏，内含登录表单，具体CSS样式可参考Bootstrap官方文档。
jQuery前端交互逻辑
jQuery逻辑
点击页面链接或按钮时，调用hwLayer插件以触发登录弹出层。首先需加载jQuery和hwLayer插件。
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.hwLayer.js"></script> 随后调用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');
}
});
});
}); PHP后端验证处理
PHP后端
上述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实现弹出层异步登录的相关知识，希望有所帮助。如有疑问请留言，小编会及时回复。感谢大家对本站的支持！