ajax控制页面跳转

Posted 2020-09-01 南墙

一开始我是这么写的，一直报错，跳转路径解析不了，显示为问号：

 

前台html:

<form>
    <table style="margin: 200px auto;">
        <tr>
            <td><label for="login_userName">用户名</label></td>
            <td><input type="text" class="form-control" id="login_userName" placeholder="用户名">
            </td>
        </tr>
        <tr>
            <td><label for="login_password">密 码</label></td>
            <td><input type="password" class="form-control" id="login_password" placeholder="密 码">
            </td>
        </tr>
        <tr>
            <td><button type="submit" class="btn btn-default" onclick="login()">登录</button></td>
        </tr>
    </table>
</form>

js

function login(){
    var loginInfo = {
        "loginname":$("#login_userName").val().trim(),
        "password":$("#login_password").val().trim()
    }
    var timestamp=new Date().getTime();
    var url="/pub/frame.html?timestamp="+timestamp;
    $.ajax({
        url: \'/login/login.do\',
        type: \'post\',
        dataType: \'json\',
        contentType:\'application/json\',
        async:false,
        data: JSON.stringify(loginInfo),
        success: function (data) {
            //正常回调
            if(data.status==0){
                $("#login_userName").val("");
                $("#login_password").val("");
                window.location.href=url;
            }else if(data.status==1) {
                alert(data.msg);
            }
        },
        error:function (data) {
            alert(data.msg);
        }
    });
}

 解决方案有三种：

第一种：将提交按钮type由submit改为button

第二种：在跳转页面方法也就是window.location.href=url;后加上window.event.returnValue=false;

第三种：在按钮点击事件中写：onclick="login();return false;"

因为使用ajax跳页提交了一次表单，而submit也会自动提交表单，需要阻断submit的提交。