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


Posted in PHP onApril 27, 2015

用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度。本文将使用PHP和jQuery来实现登录和退出功能。

准备数据库

本例我们使用Mysql数据库,创建一张user表,表结构如下:

CREATE TABLE `user` ( 
 `id` int(11) NOT NULL auto_increment, 
 `username` varchar(30) NOT NULL COMMENT '用户名', 
 `password` varchar(32) NOT NULL COMMENT '密码', 
 `login_time` int(10) default NULL COMMENT '登录时间', 
 `login_ip` varchar(32) default NULL COMMENT '登录IP', 
 `login_counts` int(10) NOT NULL default '0' COMMENT '登录次数', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

然后往user表中插入一条用户信息数据:

INSERT INTO `user` (`id`, `username`, `password`, `login_time`, `login_ip`, `login_counts`) 
 VALUES(1, 'demo', 'fe01ce2a7fbac8fafaed7c982a04e229', '', '', 0);

index.php

用户在输入用户名和密码后,提示用户登录成功,并显示相关登录信息,如果点击“退出”,则退出到用户登录界面。
进入index.php,如果用户已登录则显示登录信息,如果未登录则显示登录框要求用户登录。

<div id="login"> 
   <h3>用户登录</h3> 
   <?php 
   if(isset($_SESSION['user'])){ 
   ?> 
   <div id="result"> 
    <p><strong><?php echo $_SESSION['user'];?></strong>,恭喜您登录成功!</p> 
    <p>您这是第<span><?php echo $_SESSION['login_counts'];?></span>次登录本站。</p> 
    <p>上次登陆本站的时间是:<span><?php echo date('Y-m-d H:i:s',$_SESSION['login_time']);?> 
</span></p><p><a href='#' id='logout'>【退出】</a></p> 
   </div> 
   <?php }else{?> 
   <div id="login_form"> 
     <p><label>用户名:</label> <input type="text" class="input" name="user" id="user" /></p> 
     <p><label>密 码:</label> <input type="password" class="input" name="pass" id="pass" /> 
</p> 
     <div class="sub"> 
       <input type="submit" class="btn" value="登 录" /> 
     </div> 
   </div> 
   <?php }?> 
</div>

注意在index.php文件头应该加上语句:session_start; 同时在head部分引入jquery库,以及包含global.js,您还可以为登录框写个漂亮的CSS样式,当然本例已经略微写了个简单的样式,请查看源码。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/global.js"></script>

global.js

global.js文件包括了将要实现的jquery代码。首先要做的就是让输入框获得焦点,像百度和google那样一打开,鼠标光标就在输入框内。使用代码如下:

$(function(){ 
  $("#user").focus(); 
});

接着要做的就是,当输入框获得和失去焦点时,分别呈现不同的样式,比如本例中使用不同的边框颜色,代码如下:

$("input:text,textarea,input:password").focus(function() { 
  $(this).addClass("cur_select"); 
}); 
$("input:text,textarea,input:password").blur(function() { 
  $(this).removeClass("cur_select"); 
});

用户登录:用户点击登录按钮后,首先要验证用户的输入不能为空,然后向后台login.php发送一个Ajax请求。当后台验证登录成功后,返回登录用户信息:如用户登录次数和上次登录时间等;如果登录失败,则返回登录失败信息。

$(".btn").live('click',function(){ 
  var user = $("#user").val(); 
  var pass = $("#pass").val(); 
  if(user==""){ 
    $('<div id="msg" />').html("用户名不能为空!").appendTo('.sub').fadeOut(2000); 
    $("#user").focus(); 
    return false; 
  } 
  if(pass==""){ 
    $('<div id="msg" />').html("密码不能为空!").appendTo('.sub').fadeOut(2000); 
    $("#pass").focus(); 
    return false; 
  } 
  $.ajax({ 
    type: "POST", 
    url: "login.php?action=login", 
    dataType: "json", 
    data: {"user":user,"pass":pass}, 
    beforeSend: function(){ 
      $('<div id="msg" />').addClass("loading").html("正在登录...").css("color","#999") 
.appendTo('.sub'); 
    }, 
    success: function(json){ 
      if(json.success==1){ 
        $("#login_form").remove(); 
        var div = "<div id='result'><p><strong>"+json.user+"</strong>,恭喜您登录成功!</p> 
        <p>您这是第<span>"+json.login_counts+"</span>次登录本站。</p> 
        <p>上次登录本站的时间是:<span>"+json.login_time+"</span></p><p> 
        <a href='#' id='logout'>【退出】</a></p></div>"; 
        $("#login").append(div); 
      }else{ 
        $("#msg").remove(); 
        $('<div id="errmsg" />').html(json.msg).css("color","#999").appendTo('.sub') 
.fadeOut(2000); 
        return false; 
      } 
    } 
  }); 
});

我在进行Ajax请求时,数据传输格式使用的是json,返回的数据也是json数据,使用JS将json数据解析,得到登录后的用户信息,然后通过append追加到#login元素下,完成登录操作。
用户退出:当点击“退出”时,向login.php发送一个Ajax请求,后台注销所有Session,页面重新回到登录界面。

$("#logout").live('click',function(){ 
  $.post("login.php?action=logout",function(msg){ 
    if(msg==1){ 
       $("#result").remove(); 
       var div = "<div id='login_form'><p><label>用户名:</label> 
       <input type='text' class='input' name='user' id='user' /></p> 
       <p><label>密 码:</label> <input type='password' class='input' name='pass' 
id='pass' /></p> 
       <div class='sub'><input type='submit' class='btn' value='登 录' /></div> 
       </div>"; 
       $("#login").append(div); 
    } 
  }); 
});

login.php

根据前台提交的请求,登录时,获取用户输入的用户名和密码,并与数据库中对应的用户名和密码进行比对,如果比对成功,则将新的更新该用户登录信息,并组装json数据传给前台。

session_start(); 
require_once ('connect.php'); 
 
$action = $_GET['action']; 
if ($action == 'login') { //登录 
  $user = stripslashes(trim($_POST['user'])); 
  $pass = stripslashes(trim($_POST['pass'])); 
  if (emptyempty ($user)) { 
    echo '用户名不能为空'; 
    exit; 
  } 
  if (emptyempty ($pass)) { 
    echo '密码不能为空'; 
    exit; 
  } 
  $md5pass = md5($pass); //密码使用md5加密 
  $query = mysql_query("select * from user where username='$user'"); 
 
  $us = is_array($row = mysql_fetch_array($query)); 
 
  $ps = $us ? $md5pass == $row['password'] : FALSE; 
  if ($ps) { 
    $counts = $row['login_counts'] + 1; 
    $_SESSION['user'] = $row['username']; 
    $_SESSION['login_time'] = $row['login_time']; 
    $_SESSION['login_counts'] = $counts; 
    $ip = get_client_ip(); //获取登录IP 
    $logintime = mktime(); 
    $rs = mysql_query("update user set login_time='$logintime',login_ip='$ip', 
login_counts='$counts'"); 
    if ($rs) { 
      $arr['success'] = 1; 
      $arr['msg'] = '登录成功!'; 
      $arr['user'] = $_SESSION['user']; 
      $arr['login_time'] = date('Y-m-d H:i:s',$_SESSION['login_time']); 
      $arr['login_counts'] = $_SESSION['login_counts']; 
    } else { 
      $arr['success'] = 0; 
      $arr['msg'] = '登录失败'; 
    } 
  } else { 
    $arr['success'] = 0; 
    $arr['msg'] = '用户名或密码错误!'; 
  } 
  echo json_encode($arr); //输出json数据 
} 
elseif ($action == 'logout') { //退出 
  unset($_SESSION); 
  session_destroy(); 
  echo '1'; 
}

当前台请求退出时,只需注销session就可以,并返回1给前台JS处理。注意上述代码中get_client_ip()是获取客户端IP的函数,限于篇幅未能列出,大家可以下载源代码查看。

好了,一套完成的用户登录和退出程序完成,不足之处在所难免,欢迎大家批评指正。

以上所述就是本文的全部内容了,希望大家能够喜欢。

PHP 相关文章推荐
PHP array_flip() 删除重复数组元素专用函数
May 16 PHP
MySQL连接数超过限制的解决方法
Jul 17 PHP
php 多关键字 高亮显示实现代码
Apr 23 PHP
php获取通过http协议post提交过来xml数据及解析xml
Dec 16 PHP
深入解析PHP内存管理之谁动了我的内存
Jun 20 PHP
计算php页面运行时间的函数介绍
Jul 01 PHP
php中eval函数的危害与正确禁用方法
Jun 30 PHP
php比较两个字符串长度的方法
Jul 13 PHP
Python中使用django form表单验证的方法
Jan 16 PHP
PHP网站自动化配置的实现方法(必看)
May 27 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
Aug 28 PHP
php的命名空间与自动加载实现方法
Aug 25 PHP
php使用cookie实现记住用户名和密码实现代码
Apr 27 #PHP
php使用cookie实现记住登录状态
Apr 27 #PHP
php curl请求信息和返回信息设置代码实例
Apr 27 #PHP
PHP rsa加密解密使用方法
Apr 27 #PHP
PHP、Java des加密解密实例
Apr 27 #PHP
PHP永久登录、记住我功能实现方法和安全做法
Apr 27 #PHP
php curl 获取https请求的2种方法
Apr 27 #PHP
You might like
如何利用PHP执行.SQL文件
2013/07/05 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
详解vue-cli3使用
2018/08/14 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Django添加feeds功能的示例
2018/08/07 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Java语言程序设计测试题选择题部分
2014/04/03 面试题
师德师风整改措施
2014/10/24 职场文书
锦旗赠语
2015/06/23 职场文书
加强党性修养心得体会
2016/01/21 职场文书
Python绘画好看的星空图
2022/03/17 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python