PHP implementiert ein aktualisierungsfreies Anmelden und Beenden basierend auf Ajax

Dieser Artikel verwendet Ajax zum An- und Abmelden ohne Aktualisierung, wodurch die Benutzererfahrung verbessert wird. Wenn der Benutzer angemeldet ist, werden die relevanten Anmeldeinformationen des Benutzers angezeigt, andernfalls wird das Anmeldeformular angezeigt.

Benutzeranmelde- und -abmeldefunktionen werden an vielen Stellen verwendet, und in einigen Projekten müssen wir Ajax zum Anmelden verwenden. Nach erfolgreicher Anmeldung wird nur ein Teil der Seite aktualisiert, wodurch die Benutzererfahrung verbessert wird. In diesem Artikel werden PHP und jQuery verwendet, um die Anmelde- und Abmeldefunktionen zu implementieren.

Bereiten Sie die Datenbank vor

In diesem Beispiel verwenden wir die MySQL-Datenbank, um eine Benutzertabelle mit der folgenden Tabellenstruktur zu erstellen:

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;

Dann einfügen in die Benutzertabelle Ein Teil der Benutzerinformationsdaten:

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

index.php

Nachdem der Benutzer den Benutzernamen und das Passwort eingegeben hat, wird er aufgefordert, sich erfolgreich anzumelden und zeigt die relevanten Anmeldeinformationen an. Wenn der Benutzer auf „Beenden“ klickt, gelangen Sie zur Benutzeranmeldeschnittstelle.
Geben Sie index.php ein. Wenn der Benutzer angemeldet ist, werden die Anmeldeinformationen angezeigt. Wenn nicht, wird das Anmeldefeld angezeigt, in dem der Benutzer aufgefordert wird, sich anzumelden.

<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>

Beachten Sie, dass die Anweisung zum Dateiheader index.php hinzugefügt werden sollte: session_start; Führen Sie gleichzeitig die jquery-Bibliothek im Kopfteil ein und fügen Sie global.js ein. Sie können auch ein schönes CSS schreiben Stil für das Anmeldefeld. Das Beispiel wurde in einem etwas einfachen Stil geschrieben. Bitte sehen Sie sich den Quellcode an.

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

global.js

Die Datei global.js enthält den JQuery-Code, der implementiert wird. Das erste, was Sie tun müssen, ist, das Eingabefeld in den Fokus zu rücken. Sobald es wie bei Baidu und Google geöffnet wird, befindet sich der Mauszeiger im Eingabefeld. Der verwendete Code lautet wie folgt:

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

Als Nächstes müssen verschiedene Stile dargestellt werden, wenn das Eingabefeld den Fokus gewinnt und verliert. In diesem Beispiel werden beispielsweise unterschiedliche Rahmenfarben verwendet folgt:

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

Benutzeranmeldung: Nachdem der Benutzer auf die Anmeldeschaltfläche geklickt hat, überprüfen Sie zunächst, ob die Eingabe des Benutzers nicht leer sein darf, und senden Sie dann eine Ajax-Anfrage an die Hintergrund-Login.php. Wenn die Anmeldung zur Hintergrundüberprüfung erfolgreich ist, werden die Informationen des angemeldeten Benutzers zurückgegeben: z. B. die Anzahl der Benutzeranmeldungen und die letzte Anmeldezeit; wenn die Anmeldung fehlschlägt, werden Informationen zu Anmeldefehlern zurückgegeben.

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

Wenn ich eine Ajax-Anfrage mache, ist das Datenübertragungsformat JSON, und die zurückgegebenen Daten sind ebenfalls JSON-Daten. Ich verwende JS, um die JSON-Daten zu analysieren, um die Benutzerinformationen nach der Anmeldung abzurufen, und hänge sie dann an zu #login Schließen Sie unter dem Element den Anmeldevorgang ab.
Benutzerausgang: Wenn auf „Beenden“ geklickt wird, wird eine Ajax-Anfrage an login.php gesendet, alle Sitzungen werden im Hintergrund abgemeldet und die Seite kehrt zur Anmeldeschnittstelle zurück.

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

Gemäß der Anfrage der Rezeption werden beim Anmelden der vom Benutzer eingegebene Benutzername und das Passwort abgerufen und verglichen mit dem entsprechenden Benutzernamen und Passwort in der Datenbank Ja, wenn der Vergleich erfolgreich ist, werden die Anmeldeinformationen des Benutzers aktualisiert und die JSON-Daten werden zusammengestellt und an die Rezeption gesendet.

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

Wenn das Frontend das Beenden anfordert, melden Sie sich einfach von der Sitzung ab und geben Sie 1 zur Verarbeitung an das Frontend-JS zurück. Beachten Sie, dass es sich bei get_client_ip() im obigen Code um eine Funktion zum Abrufen der Client-IP handelt. Sie kann aus Platzgründen nicht aufgeführt werden. Sie können den Quellcode herunterladen, um ihn anzuzeigen.

Okay, ein vollständiger Satz von Benutzeranmelde- und -abmeldevorgängen ist abgeschlossen. Es gibt unvermeidliche Mängel.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Verwandte Empfehlungen:

Die Rolle und Verwendung von Typhinweisen in PHP

PHP implementiert Bildwasserzeichen basierend zur dynamischen Additionsfunktion der Farbumgebung

So implementieren Sie Multithreading in PHP

Das obige ist der detaillierte Inhalt vonPHP implementiert ein aktualisierungsfreies Anmelden und Beenden basierend auf Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!