标签：username const html window href location 2.21 制作 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.centered-form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bordered-form {
border: 2px solid #000; /* 边框样式 */
padding: 20px; /* 可选的内边距 */
background-color: #f0f0f0; /* 可选的背景颜色 */
}
</style>
</head>
<body>
<div class="centered-form">
<div class="bordered-form">
<h1>用户登录</h1>
<form id="login">
<label for="username">用户名:</label><input type="text" id="username">
<br>
<label for="password">密码:</label><input type="password" id="password">
<br>
<label>职位:</label>
<div id="loginUser">
<label><input type="radio" name="loginUser" value="专业教师">专业教师</label>
<label><input type="radio" name="loginUser" value="专业负责人">专业负责人</label>
<label><input type="radio" name="loginUser" value="教学副院长">教学副院长</label>
<label><input type="radio" name="loginUser" value="学生">学生</label>
<label><input type="radio" name="loginUser" value="系统管理员">系统管理员</label>
</div>
<div class="centered-buttons">
<button type="submit" style="display: block; margin: 0 auto;">登录</button>
<br>
<button id="register" type="button" style="display: block; margin: 0 auto;">学生注册</button>
</div>
</form>
</div>
</div>
</body>
<script>
const register = document.getElementById("register");
register.addEventListener("click", function () {
window.location.href = "http://localhost:8080/STUDENT/register.html";
});
document.getElementById("login").addEventListener("submit", function (event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const loginUser = document.querySelectorAll('input[name="loginUser"]');
let l;
loginUser.forEach(radio => {
if (radio.checked) {
l = radio.value;
}
});
const url = `user/getByUser?username=${username}&password=${password}&position=${l}`;
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
if (data === 1) {
if (l === '系统管理员') {
window.location.href = "ROOT/administrator.html?username=" + encodeURIComponent(username);
} else if (l === '学生') {
window.location.href = "STUDENT/student.html?username=" + encodeURIComponent(username);
} else if (l === '专业教师') {
window.location.href = "TEACHER/teacher.html?username=" + encodeURIComponent(username);
} else if (l === '专业负责人') {
window.location.href = "HEAD/head.html?username=" + encodeURIComponent(username);
} else if (l === '教学副院长') {
window.location.href = "PRESIDENT/president.html?username=" + encodeURIComponent(username);
}
} else {
alert("登录失败");
console.log(data);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
</html>
标签：username,
const,
html,
window,
href,
location,
2.21,
制作,
页面
From： https://www.cnblogs.com/dmx-03/p/18040271