码迷,mamicode.com
首页 > Web开发 > 详细

ajax控制页面跳转

时间:2017-02-25 15:45:20      阅读:372      评论:0      收藏:1      [点我收藏+]

标签:type   ajax   ini   content   跳转页面   async   解决   login   return   

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

技术分享

 

前台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的提交。

ajax控制页面跳转

标签:type   ajax   ini   content   跳转页面   async   解决   login   return   

原文地址:http://www.cnblogs.com/miaoying/p/6441826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!