素材牛

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

 所属分类:网页特效,PHP/MySql-Ajax,弹出层

 浏览:1905次-  下载:14次-  评论:8次-  发布时间:2016-07-28
PHP+AJAX+JSON无刷新弹出层会员登录效果
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:利用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还有很多用途,自己去发觉吧

讨论这个素材(8)回答他人问题或分享使用心得会奖励牛币

xiongliu
2016年07月28日

很简单的效果,讲解很详细,一看就懂

huhuachuan:对新手帮助很大
回复
小郭米
2017年10月10日

学习

回复
longlong
2017年11月22日

很简单的效果,讲解很详细,一看就懂

回复
z5128475
2018年01月04日

这种东西很常用

回复
bo5211ok
2018年02月09日

这个好  正是我需要的   

回复
何去何从
2018年05月03日

很好,值得学习

回复
ansenlee
2019年02月21日

断登录失败,将错误信息返

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:14
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证