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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
vue.js实例todoList项目
Jul 07 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
javascript实现计算器功能
Mar 30 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python3实现字符串操作的实例代码
2019/04/16 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
C语言开发工程师测试题
2016/12/20 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
护士辞职信模板
2014/01/20 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers