场景:实现一个发送注册社团申请的功能。
实现流程:点击“注册”按钮,发送一个请求,请求路径经过解析后,由控制器里的指定的方法处理,跳转到注册页面;完成信息的编辑后,点击“提交”,发送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";}
如果觉得《ajax同步请求后再次发送上一个请求》对你有帮助,请点赞、收藏,并留下你的观点哦!