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

(0)

相关推荐

  • asp.net+jquery ajax无刷新登录的实现方法

    因为工作需要研究了一下 js的ajax,下面是成果.主要是三部分:一.js部分 友情提示注意js部分中的 $("#btn_login")中的return false:这个可以阻止回转服务器不然还是会刷新 复制代码 代码如下: $(document).ready(function () {    $("#btn_login").click(function () {        postlogin();        return false;    });});

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

  • jQuery.ajax 用户登录验证代码

    复制代码 代码如下: $.ajax({ type: "post", url: "Handler1.ashx", data: { username: "admin", password: "123" }, success: successHandle }); function successHandle(rep) { $("#msg").html(rep); }

  • jQuery+Ajax用户登录功能的实现

    ok,先来贴几张张效果图. 其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登录成功,

  • PHP+jQuery+Ajax实现用户登录与退出

    用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库 本例我们使用Mysql数据库,创建一张user表,表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL auto_increment, `username` varchar(30) NOT NULL COMMENT '用户名', `password` v

  • jQuery基于ajax实现页面加载后检查用户登录状态的方法

    本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然

  • jQuery+AJAX实现遮罩层登录验证界面(附源码)

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

  • JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册

    最近在仿造一个书城的网站: http://www.yousuu.com ,UI直接拿来用,前端后端自己写,目前大部分功能已经实现, 就把具体的 登录注册功能 拿来分享一下.PS:又写登录注册会不会被人喷啊=.= 一.开发环境的部署 程序结构: BootStrap+Ajax+Struts2+Hibernate+MySql 仅供参考:能实现相关功能即可 操作系统:ubuntu 14.10 前端框架:BootStrap   注:此框架只是为了实现用户界面,和具体功能无关 数据库:mysql-5.5 数

  • 基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

  • div弹出层的ajax登录(Jquery版+c#)

    页面初始化,界面如图所示: Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码): 可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢! 加载列表如下图所示: 可以随意地点击添加到Server name中,登录时截图所示: 文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了 demo.html(全部前台代码,js/css

  • S2SH整合JQuery+Ajax实现登录验证功能实现代码

    不多说了,上码 action 复制代码 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction ext

  • jquery ajax 登录验证实现代码

    使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码 代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu

随机推荐