我的傻逼经历：form跟buteen连用的“坑”

写了一个登录页面，页面用的form来进行数据的输入，提交为了好看用了layui的buteen按钮。

代码如下：

<form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text" name="loginName" placeholder="请输入用户名" value="admin" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-block">
                    <input type="text" name="password" placeholder="请输入密码" autocomplete="off" value="admin" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码：</label>
                <div class="layui-input-block">
                    <input type="text" id="verify_input" name="validateCode" placeholder="请输入验证码"  autocomplete="off" class="layui-input">
                    <div class="pull_left">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img id="imgVerify" src="/getVerify" alt="更换验证码" height="36" width="170" onclick="getVerify(this);">
                        </a>
                    </div>
                </div>

            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" onclick="aVerify()">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

登录的onclick方法如下：

function login() {
        var loginName = $("input[name='loginName']").val();
        var password = $("input[name='password']").val();
        // var rememberMe = $("input[name='rememberme']").is(':checked'); //是否记住密码
        $.ajax({
            url: "/yzLogin",
            type: "post",
            data: {
                "loginName": loginName,
                "password": password
            },
            async:  false,
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    console.log("登录成功")
                    window.location.href = '/index';  // 跳转到首页
                } else {
                    $("#verify_input").val("");
                    // $.modal.msg(result.msg);
                }
            }
        });
    }

请求后台接口，请求成功，跳转到首页面。

 

但是当我运行的时候，每次请求完成还是在登录页面，不知道咋回事，调试了许久未果。断点调试发现，后台代码验证正常执行，返回值也正确，js中也执行了跳转。但是就是没有跳转到首页面中。

一番请教后发知道，form跟buteen是不能连用的，butten会自动提交页面中form表单中的信息，所以我再buteen中使用了onclick方法时，js会先执行我定义的js方法的内容，就是我想要执行的校验过程信息，最后返回成功实现跳转过程。但是由于使用了form，当我定义的login()方法执行完成后，form会自动请求后台地址信息，又一次请求到了登录页面的接口，所以不管我怎么调试，程序没有问题，即使我请求js正确最终还是跳转到了我的登录页面之中。

 

基础真的很重要，本来一个小问题困扰了大半天。以此为戒。日后一定注重基础的重要。