idea中HTML文件登录成功跳转页面代码
时间: 2024-09-19 11:04:46 浏览: 66
在IntelliJ IDEA中创建HTML文件并实现登录成功后的跳转,通常涉及到前端JavaScript和后端API交互。以下是一个简单的示例:
1. 创建HTML登录表单:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form id="loginForm" action="/api/login" method="POST">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">登录</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function (e) {
e.preventDefault(); // 阻止默认提交行为
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
window.location.href = '/success'; // 登录成功后跳转到/success页面
} else {
alert('登录失败');
}
});
});
</script>
</body>
</html>
```
在这个例子中,当用户点击登录按钮时,会发送一个POST请求到`/api/login` API,携带用户名和密码。如果API返回状态为`success`,前端将跳转到`/success`页面。
阅读全文