前端代码:
<table class="table table-striped table-sm">
<tr>
<th colspan="3">信息修改</th>
</tr>
<tr>
<td colspan="3" height="20px"></td>
</tr>
<tr>
<td>学生姓名</td>
<td>
<input name="name" id="stuName" type="text"/>
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="text" id="age" name="age"/>
</td>
</tr>
<tr>
<td>住址</td>
<td>
<input type="text" id="address" name="address"/>
</td>
</tr>
<tr>
<td colspan="2" height="30px"></td>
</tr>
<tr>
<td align="right">
<input type="button" onclick="addStu()" value="提交" class="button"/>
</td>
<td>
<input type="reset" value="重置" class="button"/>
</td>
</tr>
</table>
<script type="text/javascript">
function addStu(){
var stuId = $("#stuId").val();
var stuName = $("#stuName").val();
var age = $("#age").val();
var address = $("#address").val();
if(stuId == "" || stuName == "" || age == "" || address == "") {
alert("请将信息填写完整");
}else {
$.ajax({
url: "http://localhost:8080/admin/addStudent",
type: "POST",
data: {"stuId": stuId, "stuName": stuName, "age": age, "address": address},
datatype: 'json',
success: function (data) {
if (data.code == "0") {
window.location.href = "http://localhost:8080/admin/listStudent";
} else {
alert("异常");
}
}
});
}
}
</script>
注意:
Ajax的方法需要写在body script中,因为,如果在其他位置的话,在代码执行的时候会先执行js部分的内容,这个时候还没有dom节点,在body里就是为了保证在js执行的时候是有dom存在的。
后端代码:
@Transactional
@PostMapping("/addStudent")
@ResponseBody
public Map<String,String> addStudent(String stuName,int age,String address, HttpSession session) {
//获取session域中的管理员Id
int adminId = (int) session.getAttribute("adminId");
//获取当前时间
Timestamp timestamp = new Timestamp(System.currentTimeMillis());
//创建一个学生对象,保存前端传递过来的数据
Student student = new Student(adminId,stuName,age,address,timestamp,timestamp);
//增加学生
studentService.insertStudent(student);
//获取学生Id
String id = student.getId().toString();
//学生Id作为key,将学生对象存储到redis中
redisTemplate.opsForValue().set(id,student);
Map<String,String> map = new HashMap();
//返回给前端Ajax一个成功的数据
map.put("code","0");
return map;
}