关于js不执行页面跳转

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

 

    原文作者:zhang-php
    原文地址: https://blog.csdn.net/qq_37682202/article/details/81365826
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞