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

  • 相关阅读:
    Linux上vi(vim)编辑器使用教程
    什么是servlet
    探索ArrayList自动改变size真相
    十种算法
    二级缓存:EHCache的使用
    Lucene:基于Java的全文检索引擎简介
    简述 Hibernate 和 JDBC 的区别、优缺点
    Spring学习笔记
    如何复制表结构、如何复制表数据:
    破解安装 SecureCRT 7.0.2 for mac完美破解版,mac secureCRT , apple secureCRT
  • 原文地址:https://www.cnblogs.com/miaoying/p/6441826.html
Copyright © 2011-2022 走看看