场景:实现一个发送注册社团申请的功能。
实现流程:点击“注册”按钮,发送一个请求,请求路径经过解析后,由控制器里的指定的方法处理,跳转到注册页面;完成信息的编辑后,点击“提交”,发送ajax请求(同步,js代码如下所示)
在这个过程中,我遇到过几个问题:
- contentType:‘application/json’:这句话不加上,会出现415错误,
- async:false:如果改为异步请求,会在alert(‘申请提交成功!’);弹出并点击确定后,重新发起跳转到注册页面的这个请求,发生请求重复的问题。因此,需要在弹出提示框后,就停止请求的发送(事实上,弹框后就已经说明ajax请求结束了。至于为什么会再次发送跳转到注册页面的那个请求,这个我也不明白……但可以缓解这种问题造成的影响:如果跳转到注册页面的请求携带了参数,这时是null,需要在处理此请求的方法中另外处理这一情况。)
<script type="text/javascript">
$(function(){
$("#registerbtn").click(function(){
alert('即将提交数据');
var regForm = $("#clubRegForm").serializeJSON();
console.log(JSON.stringify(regForm));
$.ajax({
url:"${pageContext.request.contextPath}/submitClubApply",
type:"post",
async:false,
contentType:'application/json',
data:JSON.stringify(regForm),
success:function(data){
if(data){
alert('申请提交成功!');
}else{
alert('申请提交失败,请重试!');
}
},
error:function(e){
alert('请求出错!' + e);
}
});
});
});
</script>
控制器处理跳转注册页面的方法:
/**
* 社团管理模块
*
* @return
*/
// 跳转到社团注册界面(三种身份均可)
@RequestMapping("/toRegisterClub")
public String toAddPage(String uid, String cid, String flag, Model model) {
System.out.println("flag" + flag);
User user = userService.getUserByID(uid);
// 如果user对象为null,直接返回就行!弊端就是:这个时候,无法回显数据到页面上。
if (user == null)
return "club_register";
// 获取当前用户姓名,并返回给目标页面
if (flag == "0") {// 说明是第一次注册,注册表中没有数据
model.addAttribute("uname", user.getName());
} else {// 说明是再次申请,这时需要回显出原来的注册信息
Club club = clubService.getClubById(cid);
System.out.println("再次申请的社团注册信息" + club);
model.addAttribute("clubReg", club);
model.addAttribute("uname", user.getName());
}
return "club_register";
}