第一种方法看起来像提交表单,其实并没有提交。第二种提交表单到服务器。
- 用button+Ajax处理表单数据
在ajax中取出各个元素的值,手动封装到json中。
把这个json封装进ajax的data,再用ajax发送/add请求
此时json会自动转成Student实例,成为int add(Student student)的参数。
//controller层
@RequestMapping("/add")
public int add(Student student){
return studentService.add(student);
}
//按钮的ajax
$("#btn").click(function () {
//获取表单元素值,封装到json中
var param = {
"sname": $("#sname").val(),
"gender": $('input:radio[name="gender"]:checked').val(),
"birthday":$("#birthday").val(),
"telephone":$("#telephone").val(),
"email":$("#email").val(),
"classid":$("#classid").val(),
};
//请求/add,携带param作为add方法的参数
$.ajax({
url:"/add",
data:param,
type:"POST",
dataType:"text",
success:function (data) {
if(data>0){
alert("新增成功");
window.location.reload();
}else {
alert("新增失败");
}
}
})
})
//form:这是一个没有submit和action的form
<form>
<div align="center">
<h1>新增学员信息</h1>
姓名:<input type="text" id="sname" name="sname"><br/>
性别:
<label>男:<input type="radio" name="gender" checked="checked" value="男"/></label>
<label>女:<input type="radio" name="gender" value="女"/></label>
<br/>
生日:<input type="text" id="birthday" name="birthday"><br/>
电话:<input type="text" id="telephone" name="telephone"><br/>
E-mail:<input type="text" id="email" name="email"><br/>
<label>班级:</label>
<select name="classid" id="classid">
<option value="1" selected="selected">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
<option value="4">四班</option>
<option value="5">五班</option>
<option value="6">六班</option>
</select>
<br/>
<input type="button" value="新增" id="btn"/>
</div>
</form>
- 用submit提交表单
直接在form的action中写请求的地址/add
点击submit,按钮表单会向action中的地址提交
提交时,表单中的数据会自动封装成一个Student实例,
并且成为int add(Student student)方法的参数
//controller层
@RequestMapping("/add")
public int add(Student student){
return studentService.add(student);
}
//form:用submit按钮提交表单到服务器
<form action="/add" method="post">
<div align="center">
<h1>新增学员信息</h1>
姓名:<input type="text" id="sname" name="sname"><br/>
性别:
<label>男:<input type="radio" name="gender" checked="checked" value="男"/></label>
<label>女:<input type="radio" name="gender" value="女"/></label>
<br/>
生日:<input type="text" id="birthday" name="birthday"><br/>
电话:<input type="text" id="telephone" name="telephone"><br/>
E-mail:<input type="text" id="email" name="email"><br/>
<label>班级:</label>
<select name="classid" id="classid">
<option value="1" selected="selected">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
<option value="4">四班</option>
<option value="5">五班</option>
<option value="6">六班</option>
</select>
<br/>
<input type="submit" value="提交">
</div>
</form>