JSP+Servlet+MyBatis3 学生信息添加功能实现 - 二级联动宿舍选择 - 常规

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加学生信息</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 获取宿舍信息
$.ajax({
url: "getDormitoryInfo.action",
type: "GET",
dateType: "json",
success: function(data){
// 填充第一个下拉列表
var dormitorySelect = $("#dormitorySelect");
for(var i=0; i<data.length; i++){
var option = $("<option>").val(data[i].id).text(data[i].name);
dormitorySelect.append(option);
}
}
});
<p>// 根据性别选择宿舍
$(&quot;#genderSelect&quot;).change(function(){
var gender = $(this).val();
var dormitorySelect = $(&quot;#dormitorySelect&quot;);
dormitorySelect.empty();
if(gender != ''){
// 获取对应性别并且有空余床位的宿舍信息
$.ajax({
url: &quot;getDormitoryByGender.action&quot;,
type: &quot;GET&quot;,
data: {gender: gender},
dateType: &quot;json&quot;,
success: function(data){
// 填充第二个下拉列表
for(var i=0; i&lt;data.length; i++){
var option = $(&quot;<option>&quot;).val(data[i].id).text(data[i].name);
dormitorySelect.append(option);
}
}
});
}
});</p>
<p>// 添加学生信息
$(&quot;#addStudentBtn&quot;).click(function(){
var gender = $(&quot;#genderSelect&quot;).val();
var dormitoryId = $(&quot;#dormitorySelect&quot;).val();</p>
<p>if(gender == '' || dormitoryId == ''){
alert(&quot;请选择性别和宿舍&quot;);
return;
}</p>
<p>// 添加学生信息
$.ajax({
url: &quot;addStudent.action&quot;,
type: &quot;POST&quot;,
data: {gender: gender, dormitoryId: dormitoryId},
dateType: &quot;json&quot;,
success: function(data){
if(data.success){
alert(&quot;添加成功&quot;);
// 更新宿舍剩余床位
$.ajax({
url: &quot;updateDormitoryBeds.action&quot;,
type: &quot;POST&quot;,
data: {dormitoryId: dormitoryId},
dateType: &quot;json&quot;,
success: function(data){
if(data.success){
alert(&quot;宿舍床位更新成功&quot;);
}else{
alert(&quot;宿舍床位更新失败&quot;);
}
}
});
}else{
alert(&quot;添加失败&quot;);
}
}
});
});
});
</script></p>
</head>
<body>
<h2>添加学生信息</h2>
<div>
<label for="genderSelect">性别：</label>
<select id="genderSelect">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<label for="dormitorySelect">宿舍：</label>
<select id="dormitorySelect"></select>
</div>
<button id="addStudentBtn">添加学生</button>
</body>
</html>