suchen
Heimphp教程php手册php ajax 用户登录退出

php ajax 用户登录退出

Jun 13, 2016 am 10:00 AM
ajaxjqueryphphauptsächlich实现Artikel用户登录结合退出

本文章主要讲到了jquery中的ajax和php结合,实现用户无刷新登录效果,有需要的朋友可以参考一下。

本例我们使用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,如果用户已登录则显示登录信息,如果未登录则显示登录框要求用户登录。

 代码如下 复制代码


     

用户登录


            if(isset($_SESSION['user'])){
      ?>
     

       

,恭喜您登录成功!


       

您这是第次登录本站。


       

上次登陆本站的时间是:

【退出】


     

     
     

         


         



         

             
         

     

     

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

 代码如下 复制代码


 

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

 代码如下 复制代码

$("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==""){
        $('
').html("用户名不能为空!").appendTo('.sub').fadeOut(2000);
        $("#user").focus();
        return false;
    }
    if(pass==""){
        $('
').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(){
            $('
').addClass("loading").html("正在登录...").css("color","#999")
.appendTo('.sub');
        },
        success: function(json){
            if(json.success==1){
                $("#login_form").remove();
                var div = "

"+json.user+",恭喜您登录成功!


               

您这是第"+json.login_counts+"次登录本站。


               

上次登录本站的时间是:"+json.login_time+"


                【退出】

";
                $("#login").append(div);
            }else{
                $("#msg").remove();
                $('
').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 = "

 
            


            

id='pass' />


            

            
";
             $("#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 (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';
}

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

 

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft