php ajax登陸註冊

時間  2019-12-04
標籤 php ajax 登陸 註冊 欄目 PHP 简体版
原文   原文鏈接

用戶登陸與退出功能應用在不少地方，而在有些項目中，咱們須要使用Ajax方式進行登陸，登陸成功後只刷新頁面局部，從而提高了用戶體驗度。本文將使用PHP和jQuery來實現登陸和退出功能。javascript

準備數據庫
php

本例咱們使用Mysql數據庫，建立一張user表，表結構以下：css

?
1
2
3
4
5
6
7
8
9
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表中插入一條用戶信息數據：html

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

index.php
java

用戶在輸入用戶名和密碼後，提示用戶登陸成功，並顯示相關登陸信息，若是點擊「退出」，則退出到用戶登陸界面。
進入index.php，若是用戶已登陸則顯示登陸信息，若是未登陸則顯示登陸框要求用戶登陸。mysql

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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樣式，固然本例已經略微寫了個簡單的樣式，請查看源碼。jquery

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

global.js
ajax

global.js文件包括了將要實現的jquery代碼。首先要作的就是讓輸入框得到焦點，像百度和google那樣一打開，鼠標光標就在輸入框內。使用代碼以下：sql

?
1
2
3
$( function (){
   $( "#user" ).focus();
});

接着要作的就是，當輸入框得到和失去焦點時，分別呈現不一樣的樣式，好比本例中使用不一樣的邊框顏色，代碼以下：數據庫

?
1
2
3
4
5
6
$( "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請求。當後臺驗證登陸成功後，返回登陸用戶信息：如用戶登陸次數和上次登陸時間等；若是登陸失敗，則返回登陸失敗信息。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$( ".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，頁面從新回到登陸界面。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( "#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數據傳給前臺。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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的函數，限於篇幅未能列出，你們能夠下載源代碼查看。

好了，一套完成的用戶登陸和退出程序完成，不足之處在所不免，歡迎你們批評指正。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程