我的项目之前都是用location.href来向后台传递参数,因为最近在学习ajax,所以将传值方式改成了ajax发送post请求,于是问题便接踵而来,我发现在controller中通过返回ModelAndView对象竟然不能实现页面跳转了,刚开始百思不得其解,现在总算明白这到底是怎么一回事了,也想出了一种解决方法,特此记录下来,方便以后回看
不能跳转的原因:
ajax实际上是通过XMLHttpRequest来向服务器发送异步请求的,从服务器获取数据,然后使用JS来更新页面,这也就是常说的局部刷新实现方式,所以ajax请求之后,服务器返回的都是纯文本流,客户端的浏览器在获取ajax异步结果时,不是直接显示在页面上,而是要通过js来进行处理,js处理完以后才能显示在页面上,所以这才导致了controller中的ModelAndView对象不能直接返回视图
解决方法:
将页面跳转的控制放到前端页面的js中来进行跳转,即location.href = 'xxxxxxx'
前端jsp页面的代码
function userresigter() {
var phonenumber = document.getElementById("phonenumber").value.trim();
var password = document.getElementById("password").value.trim();
var username = document.getElementById("username").value.trim();
var password_again = document.getElementById("password_again").value.trim();
var yanzhengma = document.getElementById("yanzhengma").value.trim();
if(username == "" || password == "" || password_again == "" || phonenumber == ""){
sweetAlert("请将信息填写完整");
}else if(password != password_again){
sweetAlert("两次输入的密码不同");
}else if(yanzhengma == ""){
sweetAlert("请输入您的短信验证码!");
}else if(isonclick == false){
sweetAlert("请先请求手机验证码!");
}else{
var params = {};
params.phonenumber = phonenumber;
params.password = password;
params.username = username;
params.yanzhengma = yanzhengma;
<!--async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行 -->
$.ajax({
async:false,
url:"userresigter",
type:"post",
data: params,
datatype: 'json',
success: function (data) {
if(data.code == "0"){
window.location.href = "login";
sweetAlert("注册成功!");
}else if(data.code == "2"){
sweetAlert("该手机号码已经被注册");
}else{
sweetAlert("手机验证码错误");
}
}
});
}
}
Controller代码
//注册控制
@ResponseBody
@RequestMapping(value = "userresigter",method = RequestMethod.POST)
public Map<String,Object> userresigter(String phonenumber,String password,String username,String yanzhengma,
HttpServletRequest request,HttpServletResponse response) throws Exception {
Map<String,Object> map = new HashMap<String,Object>();
System.out.println("前端传来的验证码是"+yanzhengma);
System.out.println("前端传来的手机号码是"+phonenumber);
System.out.println("前端传来的用户名是"+username);
System.out.println("前段传来的密码是"+password);
Date date = new Date();
Timestamp createtime = new Timestamp(date.getTime());
User user = usi.queryUserbyphonenumber(phonenumber);
if(request.getSession().getAttribute("phonevcode").equals(yanzhengma)){
if(user == null){
//确认添加用户
User user1 = new User(username,password,phonenumber,createtime);
usi.adduser(user1);
request.getSession().setAttribute("userphone",phonenumber);
request.getSession().setAttribute("password",password);
map.put("code","0");
}else{
//该手机号码已经被注册 状态码2
map.put("code","2");
}
}else{
//手机验证码不正确 状态码1
map.put("code","1");
}
return map;
}
controller中经过校验后,返回我自己定义的状态码给前端,再通过前端js中的代码进行页面跳转