素材牛VIP会员

PHP+jQuery+Ajax+SESSION登录与退出实例教程

 所属分类:PHP/MySql-Ajax,常用实例教程

 浏览:12307次-  下载:1725次-  评论:26次-  更新时间:2020-08-22
PHP+jQuery+Ajax+SESSION登录与退出实例教程
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:本文使用Ajax无刷新登录和退出,从而提升了用户体验。

基础属性

  • 难易初级
  • 语言PHP
  • 数据库mysql

详细介绍

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>

global.js登录

$(".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: "ajax.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;  
            }  
        }  
    });  
});

global.js退出

$("#logout").live('click',function(){  
    $.post("ajax.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);  
        }  
    });  
});

ajax.php

用户登录和退出后端PHP操作如下:

session_start();  
require_once ('connect.php');  
  
$action = $_GET['action'];  
if ($action == 'login') {  //登录  
    $user = stripslashes(trim($_POST['user']));  
    $pass = stripslashes(trim($_POST['pass']));  
    if (empty ($user)) {  
        echo '用户名不能为空';  
        exit;  
    }  
    if (empty ($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';  
}

相关素材 - Ajax,常用实例教程

讨论这个素材(26)回答他人问题或分享使用心得会奖励牛币

阿***灯  
2020年02月24日

学习,基础的第一关

回复
un***oo  
2020年03月01日

基本上用素材牛中的素材可以做一个网站了,这用来做登录注册再好不过

回复
Sm***ty  
2020年03月08日

真是个好网站,不断的学习不断的提高

回复
la***gt  
2020年03月26日

真好,刚开始学习,可以多练练

回复
蜗***跑  
2020年03月26日

简洁清新的登陆

回复
Jo***91  
2020年03月27日

好网站啊,不愁没例子练习啦

回复
鸭***咬  
2020年04月12日

SESSION也是比较常用的

回复
阿***q  
2020年05月06日

谢谢 收下了

回复
阿***7  
2020年05月09日

我想知道connect.php怎么写的,因为我自己写的connect.php用来会失败

回复
gu***un  
2020年05月16日

是的,点击多次有问题的

回复
ji***ca  
2020年05月23日

真好,刚开始学习,可以多练练真好,刚开始学习,可以多练练

回复
爱***粉  
2020年06月15日

源生的代码

回复
流***雨  
2020年06月23日

感觉还不错,挺喜欢的

回复
阿***灯  
2020年06月24日

十分不错,非常实用,很棒

回复
间***p  
2020年06月29日

马上下载,准备用了。

回复
岛***疤  
2020年07月01日

不错的插件,谢谢作者分享

回复
踏***e  
2020年07月03日

刚好需要

回复
随***@  
2020年07月20日

如果有thinkphp的就更好了

回复
ad***cn  
2020年07月21日

下来试一试

回复
阿***t  
2020年07月23日

这种方法比我们书上写的简单

回复
th***as  
2020年07月29日

好高端的样子

回复
qq***42  
2020年07月30日

实用 值得学习

回复
起***劲  
2020年08月07日

很基础的功能 多谢楼主分享啊

回复
hx***lf  
2020年08月20日

不错的例子。实用

回复
qq***19  
2020年10月07日

响应式

回复
wx***61  
2020年12月15日

值得学习 好用

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

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