<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form id="loginForm">
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" required autofocus placeholder="请输入用户名" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" required autofocus placeholder="请输入密码" name="password" id="password"></td>
</tr>
<tr>
<td><img src="gd_captcha.php" alt="验证码" onclick="reloadImg()" id="img"></td>
<td><input type="text" name="captcha" id="captcha" placeholder="请输入验证码"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="登陆" id="btn" onclick="dologin()"></td>
</tr>
</table>
</form>
<script>
// 重新生成验证码
function reloadImg() {
$('#img').attr('src', "gd_captcha.php?id="+Math.random());
}
// 回车登陆
$('#btn').keydown(function (e) {
if (e.keyCode == 13) {
dologin();
}
});
// 登陆
function dologin() {
let username = $.trim($('#username').val()),
password = $.trim($('#password').val()),
captcha = $.trim($('#captcha').val());
if (username == '') {
alert('请输入用户名');
return false;
}
if (password == '') {
alert('请输入密码');
return false;
}
if (captcha == '') {
alert('请输入验证码');
return false;
}
$.post('dologin.php', {'username': username, 'password': password, 'captcha': captcha}, function (res) {
if (res.code > 0) {
alert(res.msg);
reloadImg();
} else {
alert(res.msg);
setTimeout(() => {
window.location.href = 'index.php'
}, 1000);
}
}, 'json')
}
</script>
</body>
</html>
2.处理登陆 dologin.php
<?php
require 'connect.php';
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
$captcha = strtolower($_POST['captcha']);
if ($username == '') {
exit(json_encode(array('code' => 1, 'msg' => '用户名不能为空')));
}
if ($password == '') {
exit(json_encode(array('code' => 1, 'msg' => '密码不能为空')));
}
if ($captcha == '') {
exit(json_encode(array('code' => 1, 'msg' => '验证码不能为空')));
}
// 验证验证码
if ($captcha != strtolower($_SESSION['captcha'])) {
exit(json_encode(array('code' => 1, 'msg' => '验证码不正确')));
}
// 验证用户
$sql = "SELECT `username`,`password` FROM `users` WHERE `username`= ?; ";
$stmt = $pdo->prepare($sql);
$stmt->execute([$username]);
$user = $stmt->fetch();
if ($user == false) {
exit(json_encode(array('code' => 1, 'msg' => '用户名不存在')));
}
if (md5($user['username'].$password) != $user['password']) {
exit(json_encode(array('code' => 1, 'msg' => '密码错误')));
}
// 验证成功后设置session
$_SESSION['username'] = $username;
exit(json_encode(array('code' => 0, 'msg' => '登陆成功')));
connect.php
$dsn = 'mysql:host=127.0.0.1;port=3306;dbname=user';
$username = 'root';
$password = 'root123';
$pdo = new PDO($dsn, $username, $password);
3.登陆成功后到主页index.php
<?php
session_start();
echo $_SESSION['username']. '登陆成功';
?>
<button name="logout" id="logout">安全退出</button>
<script>
const btn = document.querySelector('#logout');
btn.onclick = (() => location.href='dologout.php')
</script>
4.安全退出dologout.php
session_start();
session_destroy();
exit('退出成功');