zoukankan      html  css  js  c++  java
  • ajax控制页面跳转

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

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

  • 相关阅读:
    PL/SQL 记录集合IS TABLE OF的使用
    PL/SQL 触发器简介
    plsql 显式游标
    MySQL的基本知识 -- 命令
    排序算法--桶排序
    在C++中实现字符串分割--split
    第一篇献给小驰驰
    解决windows管理员已阻止你运行此应用问题
    centos 7.3 快速安装ceph
    python中int的功能简单介绍
  • 原文地址:https://www.cnblogs.com/miaoying/p/6441826.html
Copyright © 2011-2022 走看看