前端Html界面Ajax实现表单数据提交

前端代码：

<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;
    }