前端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>
html中提交表单用什么属性
<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:"localhost:8080/admin/addStudent",
type:"POST",
data:{"stuId": stuId,"stuName": stuName,"age": age,"address": address},
datatype:'json',
success:function(data){
de =="0"){
window.location.href ="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) Attribute("adminId");
//获取当前时间
Timestamp timestamp =new Timestamp(System.currentTimeMillis());
//创建⼀个学⽣对象，保存前端传递过来的数据
Student student =new Student(adminId,stuName,age,address,timestamp,timestamp);
//增加学⽣
studentService.insertStudent(student);
/
/获取学⽣Id
String id = Id().toString();
//学⽣Id作为key，将学⽣对象存储到redis中
redisTemplate.opsForValue().set(id,student);
Map<String,String> map =new HashMap();
//返回给前端Ajax⼀个成功的数据
map.put("code","0");
return map;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。