用mysql.connector和html写一个登录页面,并且可以验证账号密码正误,错误弹窗提醒,正确进入新的页面
时间: 2024-02-05 21:11:43 浏览: 20
好的,这是一个比较完整的代码示例:
1. 创建登录页面的 HTML 文件,命名为 login.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submit-btn").click(function() {
var username = $("#username").val();
var password = $("#password").val();
if (username == "" || password == "") {
alert("Please enter username and password.");
return;
}
$.ajax({
url: "login.php",
method: "POST",
data: { username: username, password: password },
success: function(response) {
if (response == "success") {
window.location.href = "welcome.php";
} else {
alert("Incorrect username or password.");
}
}
});
});
});
</script>
</head>
<body>
<h2>Login Page</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="button" value="Submit" id="submit-btn">
</form>
</body>
</html>
```
2. 创建 PHP 文件,处理登录请求,命名为 login.php:
```php
<?php
// 连接 MySQL 数据库
$host = "localhost";
$user = "root";
$password = "your_password";
$dbname = "your_database";
$conn = mysqli_connect($host, $user, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// 获取登录页面提交的数据
$username = $_POST["username"];
$password = $_POST["password"];
// 查询数据库中是否存在对应的账号密码
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
echo "success";
} else {
echo "fail";
}
mysqli_close($conn);
?>
```
3. 创建欢迎页面的 HTML 文件,命名为 welcome.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h2>Welcome!</h2>
<p>You have successfully logged in.</p>
</body>
</html>
```
4. 创建一个 MySQL 数据库,名为 your_database,然后创建一个名为 users 的表,包含以下字段:id(自增主键)、username、password。
5. 将 login.html、login.php、welcome.html 文件放在同一个文件夹下,然后在浏览器中访问 login.html 即可看到登录页面。