素材牛VIP会员

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

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

 浏览:2159次-  下载:16次-  评论:8次-  更新时间:2016-07-28
PHP+AJAX+JSON无刷新弹出层会员登录效果
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:利用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)回答他人问题或分享使用心得会奖励牛币

xi***iu  VIP2
2016年07月28日

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

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

学习

回复
lo***ng  
2017年11月22日

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

回复
z5***75  
2018年01月04日

这种东西很常用

回复
bo***ok  
2018年02月09日

这个好  正是我需要的   

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

很好,值得学习

回复
an***ee  
2019年02月21日

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

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

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)