이 기사에서는 Ajax를 사용하여 새로 고치지 않고 로그인 및 로그아웃하므로 사용자 경험이 향상됩니다. 사용자가 로그인되어 있으면 해당 사용자의 로그인 정보가 표시되고, 그렇지 않으면 로그인 양식이 표시됩니다.
사용자 로그인 및 로그아웃 기능은 여러 곳에서 사용되며 일부 프로젝트에서는 Ajax를 사용하여 로그인해야 합니다. 로그인에 성공하면 페이지의 일부만 새로 고쳐져 사용자 경험이 향상됩니다. 이 기사에서는 PHP와 jQuery를 사용하여 로그인 및 로그아웃 기능을 구현합니다.
데이터베이스 준비
이 예에서는 Mysql 데이터베이스를 사용하여 다음 테이블 구조로 사용자 테이블을 생성합니다.
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;
로그인 후 복사
그런 다음 사용자 정보 데이터 조각을 사용자 테이블에 삽입합니다.
INSERT INTO `user` (`id`, `username`, `password`, `login_time`, `login_ip`, `login_counts`)
VALUES(1, 'demo', 'fe01ce2a7fbac8fafaed7c982a04e229', '', '', 0);
로그인 후 복사
index. php
user 사용자 이름과 비밀번호를 입력한 후 사용자에게 로그인하라는 메시지가 표시되고 관련 로그인 정보가 표시됩니다. "종료"를 클릭하면 사용자가 사용자 로그인 인터페이스에서 로그아웃됩니다.
index.php를 입력하세요. 사용자가 로그인되어 있으면 로그인 정보가 표시됩니다. 사용자가 로그인되어 있지 않으면 사용자에게 로그인을 요청하는 로그인 상자가 표시됩니다.
<p id="login">
<h3>用户登录</h3>
<?php
if(isset($_SESSION['user'])){
?>
<p 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>
</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>로그인 후 복사
이 명령문은 index.php 파일 헤더에 추가되어야 합니다: session_start; 동시에 헤드 부분에 jquery 라이브러리를 도입하고 global.js를 포함하여 로그인을 위한 아름다운 CSS 스타일을 작성할 수도 있습니다. 물론 이 예제는 간단한 스타일로 작성되었으니 소스코드를 살펴보시기 바랍니다.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/global.js"></script>
로그인 후 복사
global.js
global.js 파일에는 구현할 jquery 코드가 포함되어 있습니다. 가장 먼저 해야 할 일은 입력 상자가 바이두나 구글처럼 열리자마자 입력 상자에 마우스 커서가 놓이도록 하는 것입니다. 사용된 코드는 다음과 같습니다.
$(function(){
$("#user").focus();
});로그인 후 복사
다음으로 할 일은 입력 상자가 포커스를 얻을 때와 잃을 때 다른 스타일을 나타내는 것입니다. 예를 들어 이 예에서는 다른 테두리 색상이 사용됩니다.
$("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==""){
$('<p id="msg" />').html("用户名不能为空！").appendTo('.sub').fadeOut(2000);
$("#user").focus();
return false;
}
if(pass==""){
$('<p 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(){
$('<p id="msg" />').addClass("loading").html("正在登录...").css("color","#999")
.appendTo('.sub');
},
success: function(json){
if(json.success==1){
$("#login_form").remove();
var p = "<p 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></p>";
$("#login").append(p);
}else{
$("#msg").remove();
$('<p id="errmsg" />').html(json.msg).css("color","#999").appendTo('.sub')
.fadeOut(2000);
return false;
}
}
});
});로그인 후 복사
Ajax 요청 시 데이터 전송 형식은 json이고, 반환되는 데이터도 json 데이터입니다. 로그인 후 사용자 정보를 얻기 위해 JS를 사용하여 json 데이터를 구문 분석한 다음 #login에 추가합니다. 요소를 추가하여 로그인 작업을 완료합니다.
사용자 종료: "종료"를 클릭하면 Ajax 요청이 login.php로 전송되고 모든 세션이 백그라운드에서 로그아웃되며 페이지가 로그인 인터페이스로 돌아갑니다.
$("#logout").live('click',function(){
$.post("login.php?action=logout",function(msg){
if(msg==1){
$("#result").remove();
var p = "<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>";
$("#login").append(p);
}
});
});로그인 후 복사
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 (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';
}로그인 후 복사
프런트엔드에서 종료를 요청하면 세션에서 로그아웃하고 처리를 위해 프런트엔드 JS에 1을 반환하면 됩니다. 위 코드의 get_client_ip()는 클라이언트 IP를 얻기 위한 함수이므로, 소스코드를 다운로드하여 볼 수는 없습니다.
알겠습니다. 사용자 로그인 및 로그아웃 절차가 모두 완료되었습니다. 피할 수 없는 단점이 있습니다. 누구나 비판하고 수정할 수 있습니다.
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
관련 권장 사항:
PHP에서 유형 힌트의 역할과 사용
PHP는 색상 환경에 따라 이미지 워터마크를 동적으로 추가하는 기능을 구현합니다.
PHP가 멀티 스레딩을 구현하는 방법
위 내용은 PHP는 Ajax를 기반으로 새로 고침 없는 로그인 및 종료를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
