帮我制定一个学生宿舍管理系统多角色登录的index.html文件
时间: 2023-07-15 15:10:01 浏览: 44
以下是一个简单的多角色登录的index.html文件示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生宿舍管理系统</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center my-5">学生宿舍管理系统</h1>
<div class="row">
<div class="col-md-6 offset-md-3">
<!-- 学生登录表单 -->
<form id="studentForm">
<h3 class="text-center mb-4">学生登录</h3>
<div class="form-group">
<label for="studentID">学号</label>
<input type="text" class="form-control" id="studentID" name="studentID" placeholder="请输入学号">
</div>
<div class="form-group">
<label for="studentPassword">密码</label>
<input type="password" class="form-control" id="studentPassword" name="studentPassword" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
<!-- 管理员登录表单 -->
<form id="adminForm">
<h3 class="text-center my-4">管理员登录</h3>
<div class="form-group">
<label for="adminID">账号</label>
<input type="text" class="form-control" id="adminID" name="adminID" placeholder="请输入账号">
</div>
<div class="form-group">
<label for="adminPassword">密码</label>
<input type="password" class="form-control" id="adminPassword" name="adminPassword" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</div>
</div>
<!-- 引入jQuery和bootstrap的JS库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// 学生登录表单提交事件
$("#studentForm").submit(function(e) {
e.preventDefault();
// 获取表单数据
var studentID = $("#studentID").val();
var studentPassword = $("#studentPassword").val();
// 发送登录请求
$.ajax({
type: "POST",
url: "student_login.php",
data: {
studentID: studentID,
studentPassword: studentPassword
},
success: function(response) {
if (response == "success") {
window.location.href = "student_home.php";
} else {
alert("学生登录失败,请检查学号和密码!");
}
}
});
});
// 管理员登录表单提交事件
$("#adminForm").submit(function(e) {
e.preventDefault();
// 获取表单数据
var adminID = $("#adminID").val();
var adminPassword = $("#adminPassword").val();
// 发送登录请求
$.ajax({
type: "POST",
url: "admin_login.php",
data: {
adminID: adminID,
adminPassword: adminPassword
},
success: function(response) {
if (response == "success") {
window.location.href = "admin_home.php";
} else {
alert("管理员登录失败,请检查账号和密码!");
}
}
});
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了Bootstrap框架来美化表单和页面样式,并用jQuery库来处理表单提交事件和发送AJAX请求。在页面中包含了两个表单,一个是学生登录表单,一个是管理员登录表单。当表单提交时,会发送一个AJAX请求到对应的PHP文件中进行验证,并根据返回的结果进行页面跳转或弹出错误提示。你可以根据自己的实际需求修改这个示例并添加更多角色的登录表单。