PHP implémente une connexion et une sortie sans actualisation basées sur Ajax

Cet article utilise Ajax pour se connecter et se déconnecter sans actualiser, améliorant ainsi l'expérience utilisateur. Si l'utilisateur est connecté, les informations de connexion pertinentes de l'utilisateur s'affichent, sinon le formulaire de connexion s'affiche.

Les fonctions de connexion et de déconnexion des utilisateurs sont utilisées dans de nombreux endroits, et dans certains projets, nous devons utiliser Ajax pour nous connecter. Après une connexion réussie, seule une partie de la page est actualisée, améliorant ainsi l'expérience utilisateur. Cet article utilisera PHP et jQuery pour implémenter les fonctions de connexion et de déconnexion.

Préparer la base de données

Dans cet exemple, nous utilisons la base de données Mysql pour créer une table utilisateur avec la structure de table suivante :

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;

Ensuite accédez à la table utilisateur Insérez une partie des données d'informations utilisateur dans :

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

index.php

Une fois que l'utilisateur a entré le nom d'utilisateur et le mot de passe, l'utilisateur est invité à se connecter avec succès et affiche les informations de connexion pertinentes. Si vous cliquez sur « Quitter », vous quitterez l'interface de connexion utilisateur.
Entrez index.php. Si l'utilisateur est connecté, les informations de connexion seront affichées. Si l'utilisateur n'est pas connecté, la boîte de connexion s'affichera pour lui demander de se connecter.

<p id="login"> 
   <h3>用户登录</h3> 
   <?php 
   if(isset($_SESSION[&#39;user&#39;])){ 
   ?> 
   <p id="result"> 
    <p><strong><?php echo $_SESSION[&#39;user&#39;];?></strong>，恭喜您登录成功！</p> 
    <p>您这是第<span><?php echo $_SESSION[&#39;login_counts&#39;];?></span>次登录本站。</p> 
    <p>上次登陆本站的时间是：<span><?php echo date(&#39;Y-m-d H:i:s&#39;,$_SESSION[&#39;login_time&#39;]);?> 
</span></p><p><a href=&#39;#&#39; id=&#39;logout&#39;>【退出】</a></p> 
   </p> 
   <?php }else{?> 
   <p 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> 
     <p class="sub"> 
       <input type="submit" class="btn" value="登 录" /> 
     </p> 
   </p> 
   <?php }?> 
</p>

Notez que l'instruction doit être ajoutée à l'en-tête du fichier index.php : session_start; En même temps, introduisez la bibliothèque jquery dans la section head et incluez global.js. beau style CSS pour la boîte de connexion Bien sûr, cet exemple a été écrit dans un style légèrement simple, veuillez vérifier le code source.

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

global.js

le fichier global.js inclut le code jquery à implémenter. La première chose à faire est de laisser le focus à la zone de saisie. Dès qu'elle est ouverte comme Baidu et Google, le curseur de la souris sera dans la zone de saisie. Le code utilisé est le suivant :

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

La prochaine chose à faire est de présenter différents styles lorsque la zone de saisie gagne et perd le focus. Par exemple, dans cet exemple, différentes couleurs de bordure sont utilisées. est la suivante :

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

Connexion de l'utilisateur : Une fois que l'utilisateur a cliqué sur le bouton de connexion, il doit d'abord vérifier que l'entrée de l'utilisateur ne peut pas être vide, puis envoyer une requête Ajax en arrière-plan login.php. Lorsque la connexion par vérification des antécédents réussit, les informations sur l'utilisateur connecté sont renvoyées : telles que le nombre de connexions utilisateur et l'heure de la dernière connexion, si la connexion échoue, les informations sur l'échec de la connexion sont renvoyées.

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

Lorsque je fais une requête Ajax, le format de transmission des données est json et les données renvoyées sont également des données json. J'utilise JS pour analyser les données json afin d'obtenir les informations utilisateur après la connexion, puis. ajoutez-le à Sous l'élément #login, terminez l'opération de connexion.
Quitter l'utilisateur : lorsque vous cliquez sur "Quitter", une requête Ajax est envoyée à login.php, toutes les sessions sont déconnectées en arrière-plan et la page revient à l'interface de connexion.

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

login.php

Selon la demande soumise par la réception, lors de la connexion, obtenir le nom d'utilisateur et le mot de passe saisis par l'utilisateur, et faites-les correspondre avec le nom d'utilisateur et le mot de passe correspondants dans la base de données. La comparaison est effectuée si la comparaison réussit, les informations de connexion de l'utilisateur seront nouvellement mises à jour et les données json seront assemblées et envoyées à la réception.

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'; 
}

Lorsque le frontend demande à quitter, déconnectez-vous simplement de la session et renvoyez 1 au frontend JS pour traitement. Notez que get_client_ip() dans le code ci-dessus est une fonction permettant d'obtenir l'adresse IP du client. En raison de limitations d'espace, elle ne peut pas être répertoriée. Vous pouvez télécharger le code source pour l'afficher.

D'accord, un ensemble complet de procédures de connexion et de déconnexion des utilisateurs est terminé. Il y a des lacunes inévitables. Tout le monde est invité à critiquer et à corriger.

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Le rôle et l'utilisation des indices de type en PHP

PHP implémente un filigrane d'image basé sur sur Fonction d'ajout dynamique de l'environnement couleur

Comment implémenter le multi-threading en PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!