最近做用户登录跳转,使用window.location.href来执行跳转,发现ajax执行登录后,返回了json值“登录成功,立即跳转页面!”,但是,页面并没有跳转,window.location.href没有执行。后来仔细检查,发现自己犯了一个低级错误,form的action属性我是去掉了的,ajax提交数据也是成功的,在后台执行完返回json值,当时测试的时候,想要的值都能获取,what,那到底是什么情况?这个低级的错误是什么呢?form标签里面,有button(而且还带type="submit")时,表单即使没有action也是会提交的,此时等于刷新页面,它与我的ajax程序一起执行了,由于表单会先执行自身的提交,ajax会慢一步,此时页面其实已经刷新了,所以就阻断了跳转……
<!-- 表单 -->
<form method="post" class="form-horizontal" role="form" id="addform">
<table id="table"><tr><td><img src="__STYLE__/images/logo.png" width="60px"></td><td><h3>用户登录<br>users login</h3></td></tr></table>
<div class="form-group">
<label class="col-sm-3 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" name="u_name" class="form-control u_name" placeholder="请输入用户名" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">登录密码</label>
<div class="col-sm-8">
<input type="password" name="u_login_password" class="form-control u_login_password" placeholder="请输入密码" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">验证码</label>
<div class="col-sm-8">
<input type="text" name="captcha" class="form-control captcha" placeholder="请输入验证码" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<img src="{:captcha_src()}" id="verify_img" > <a id="kanbuq" href="javascript:;" >看不清,换一张</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<a class="btn btn-primary" id="button" style="width:100%;height:40px;">立即登录</a>
<!--改成非按钮标签,防止表单自行提交-->
</div>
</div>
<p><a href="{:url('index/password')}">忘记密码?</a> | <a href="{:url('index/register')}">新用户注册</a></p>
</form>
<!-- ajax -->
//表单验证
$("#button").click(function(){
var u_name = $(".u_name").val();
var u_login_password = $(".u_login_password").val();
var captcha = $('.captcha').val();
if(u_name == '' || u_login_password == ''|| captcha == ''){
alert("相关信息不能为空!");
return false;
}else{
$.ajax({
type:"post",
data:{u_name:u_name,u_login_password:u_login_password,captcha:captcha},
url:"{:url('index/loginCheck')}",
dataType:"json",
async: false,
success:function(data){
if(data.status == 1){
alert(data.info);
window.location.href = data.url;
}else{
alert(data.info);
}
},
error:function(request){
alert("系统错误!");
}
});
}
});
//php程序执行页面,使用的thinkphp5框架,json返回方式如下
public function loginCheck()
{
if(input('u_name') != '' && input('u_login_password') != '' && input('captcha') != '')
{
if(captcha_check(input('captcha')))
{
$where['u_name'] = input('u_name');
$where['u_login_password'] = sha1(md5(input('u_login_password')));
$info = Db::name('users')->where($where)->find();
if($info != ''){
$data = [
'u_id' => $info['u_id'],
'u_name' => $info['u_name'],
'u_true_name' => $info['u_true_name'],
'u_idcard' => $info['u_idcard'],
'u_phone_number' => $info['u_phone_number'],
'u_wallet' => $info['u_wallet'],
'u_audit' => $info['u_audit'],
'u_role' => $info['u_role'],
'u_status' => $info['u_status'],
];
session('userdata',$data);
$arr = array(
"status" => 1,
"url" => url('index/index'),
"info" => "登录成功,进入首页!"
);
return json($arr);
}else{
$arr = array(
"status" => 1,
"url" => url('index/register'),
"info" => "系统暂无该用户,请注册!"
);
return json($arr);
}
}
else
{
$arr = array(
"status" => 2,
"info" => "验证码错误"
);
return json($arr);
}
}
else
{
$arr = array(
"status" => 3,
"info" => "数据不能为空!"
);
return json($arr);
}
}