写了一个登录页面,页面用的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正确最终还是跳转到了我的登录页面之中。
基础真的很重要,本来一个小问题困扰了大半天。以此为戒。日后一定注重基础的重要。