在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;"。

 

Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐