PHP+AJAX+JSON无刷新弹出层会员登录效果

使用方法：

载入必要的CSS、JS文件

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="popupwindow.css">
<script language="javascript" type="text/javascript" src="jquery.js">script>
<script src="jquery.popupwindow.js">script>

下面着重讲一下AJAX的操作（着重看注释部分介绍）

<script>
$(function() {
	$('#form-btn').popupwindow({ //弹出登录框
		width: 480,
		tapLayer: false,
		afterClose: function() {
			console.log('close');
		}
	});
	$(".popupwindow-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', //获取提交的帐号密码，用POST方法提交给login.php
			type: 'POST',
			dataType: 'json',
			data: {username: user, password: pass},
			beforeSend: function() {
				$('#msg').addClass('text-success').text('正在登录...');
				$(".popupwindow-ok").attr('disabled', true);
			},
			success: function(res) {
				if (res.code == 1) { //判断登录成功，将帐号信息、登录时间返回到网页上面进行显示
					$('#result').html('欢迎您，' + user + '，登录时间：' + res.logintime);
					$('#msg').removeClass('text-danger').addClass('text-success').text('登录成功！');
					$('#hw-layer-login').popupwindow('close');
				} else {
					$('#msg').addClass('text-danger').text('用户名或密码错误！'); //判断登录失败，将错误信息返回到页面
				}
				$(".popupwindow-ok").removeAttr('disabled');
			}
		});
	});
	//关闭登录弹出层
	$('.hw-overlay').on('click', function(event) {
		if (event.target == this) {
			$('#hw-layer-login').popupwindow('close');
		}
	});
});
script>

login.php页面接收数据处理讲解：（着重看注释）

//获取AJAX提交过来的帐号（安全起见做了安全过滤）
$username = htmlspecialchars($_POST['username']); 
//获取AJAX提交过来的密码（安全起见做了安全过滤）
$password = htmlspecialchars($_POST['password']);
//判断输入的帐号密码是否正确（一般这里是从数据库获取数据来与提交的数据进行对比）
if($username == 'sucainiu' && $password == '123456') 
{
	//登录成功 返回code=1，logintime=时间为当前时间
	$arr = array("code"=>1,"logintime"=>date("Y-m-d H:i:s"));
}
else
{
	//登录失败 返回code=2，logintime=时间为当前时间
	$arr = array("code"=>2,"logintime"=>date("Y-m-d H:i:s"));
}
//将PHP数组转换成JSON格式数据，以便前台JS好接收返回值
echo json_encode($arr);
?>

这样就大功告成了。这只是一个简单的例子，其实AJAX还有很多用途，自己去发觉吧