在web中,跳珠错误可能有很多,我这里只是我自己遇到的一种。
我做的是一个ssm的demo,然后配置文件等xml都配置没问题,页面跳转的controller也配置好了,springmvc中的静态资源放行也配置了,视图解析也配置了,总之xml配置以及视图执行器hander也没问题。两天来我都在找这个问题,为什么就是跳转不了。当时遇到的情况如下:
前端登录界面代码:
<form class="form-horizontal" role="form" >
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="userPwd" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="toLogin()">登录</button>
</div>
</div>
</form>
js触发登录函数代码:
function toLogin() {
var name = $('#username').val();
var pwd = $('#userPwd').val();
$.ajax({
url : basePath + '/user/login',
data : {
username : name,
password : pwd
},
type : 'POST',
async : false,
dataType : "json",
success : function(data) {
if (data.status == 200) {
// setTimeout('window.location.href="/index.html";',2000);
window.location.href = basePath + "/index.html";
} else {
alert("你输入的用户名或者密码不正确,请重新输入!")
}
}
});
}
你会发现完全没问题,但是就是点击登录无法跳转,从eclipse上可以看到后台已经查询出数据库记录,而且页面对javascript debug也是走的window.location.href这个语句,大事实际上跳转不了。后来发现,乏了一个以前不会泛的错误,form表单中,少添加了一个属性:οnsubmit="return false;",正确的form表单提交,应该这样:
<form class="form-horizontal" role="form" onsubmit="return false;">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="userPwd" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="toLogin()">登录</button>
</div>
</div>
</form>
说一下为什么:
form表单一般有个action动作,是我们使用form表单提交的地址,所以form表单是有提交功能的,一般使用form表单提交,我们只需要使用input标签就可以,但是在这里,我们实用的是ajax,要用js做登录提交,而不是form表单,那form表单让然后监控input标签,当input标签出发时候form表单会提交,并由controller响应等,如果没有controller响应就会保持原来界面,也就覆盖了我们js中写的野蛮跳转操作window.location.href,坑吧!以前学习时候遇到过并总结了,现在很长一段时间不写web就忘了,所以还是要做好笔记!所以使用js跳转的时候,记得加上οnsubmit="return false;"。