我需要一段登陆页面代码可完成前后端交互
时间: 2024-03-12 22:49:12 浏览: 54
以下是一个简单的登录页面代码示例,使用了HTML、CSS和JavaScript实现前端交互,使用了PHP实现后端交互,具体的交互流程如下:
1. 用户在前端页面输入用户名和密码,点击登录按钮。
2. 前端通过JavaScript获取用户输入的用户名和密码,并使用XMLHttpRequest对象向后端发送请求。
3. 后端使用PHP接收到前端发送的请求,获取用户名和密码,进行登录验证。
4. 验证成功,后端返回一个JSON格式的响应数据,前端通过JavaScript解析响应数据,根据响应结果来判断登录是否成功。
5. 如果登录成功,前端跳转到主页面,如果登录失败,前端提示用户登录失败。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login Page</h2>
<form>
<div class="user-box">
<input type="text" name="username" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<button type="button" onclick="login()">Login</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
body{
background: #f2f2f2;
}
.login-box{
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #000;
background: #fff;
padding: 30px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
border-radius: 10px;
text-align: center;
}
.login-box h2{
margin-bottom: 30px;
font-weight: 500;
}
.user-box{
position: relative;
}
.user-box input{
width: 100%;
padding: 10px 0;
font-size: 16px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #000;
outline: none;
background: transparent;
}
.user-box label{
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #000;
pointer-events: none;
transition: 0.5s;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label{
top: -18px;
left: 0;
color: #000;
font-size: 12px;
}
button{
background: #000;
color: #fff;
border: none;
outline: none;
border-radius: 30px;
cursor: pointer;
transition: 0.5s;
}
button:hover{
background: #fff;
color: #000;
}
```
JavaScript代码:
```javascript
function login(){
var username = document.getElementsByName('username')[0].value;
var password = document.getElementsByName('password')[0].value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var result = JSON.parse(xhr.responseText);
if(result.success){
window.location.href = "main.html";
}else{
alert(result.message);
}
}
}
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "username=" + username + "&password=" + password;
xhr.send(data);
}
```
PHP代码:
```php
<?php
$username = $_POST['username'];
$password = $_POST['password'];
if($username == "admin" && $password == "admin123"){
$result = array("success" => true);
}else{
$result = array("success" => false, "message" => "Username or password is incorrect.");
}
echo json_encode($result);
?>
```
注:以上代码仅为示例,实际应用需要根据实际需求进行修改和完善。