jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)


Posted in Javascript onMay 27, 2016

弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用。常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息。本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用。

jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

效果展示        源码下载

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

我们在点击页面中的链接或按钮后,会调用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

以上的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弹出层异步登录效果(附源码下载)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
学习ExtJS table布局
Oct 08 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
js基于cookie方式记住返回页面用法示例
May 27 #Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 #Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 #Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 #Javascript
js实现div模拟模态对话框展现URL内容
May 27 #Javascript
详解jQuery中的deferred对象的使用(一)
May 27 #Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 #Javascript
You might like
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
javascript动态创建对象的属性详解
2018/11/07 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
Python制作爬虫采集小说
2015/10/25 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
flask入门之表单的实现
2018/07/18 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
python实现随机加减法生成器
2020/02/24 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
国培教师自我鉴定
2014/02/12 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书