关于js不执行页面跳转

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37682202/article/details/81365826

最近做用户登录跳转，使用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" >&nbsp;&nbsp;<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>&nbsp;|&nbsp;<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);
        }                
	}