登录页面的处理:
引入:util.js 判断参数是否为空
/**
* 判断参数是否为空
* @param str
* @returns {Boolean}
*/
function isEmpty(str){
if (str == null || str.trim() == "") {
return true;
}
return false;
}
/**
* 判断参数是否不为空
* @param str
* @returns {Boolean}
*/
function isNotEmpty(str){
if (str == null || str.trim() == "") {
return false;
}
return true;
}
jqery以及config.js,用于验证用户登录
<form>
<div class="box show">
<input type="text" class="user yahei16" id="userName" value="" /><br /><br />
<input type="password" class="pwd yahei16" id="userPwd" value="" /><br /><br />
<input id="rem" type="checkbox" class="inputcheckbox"/> <label>记住我</label>
<span id="msg" style="color: red"></span><br /><br />
<input type="button" class="log jc yahei16" value="登 录" onclick="checkLogin()" />
<input type="reset" value="取 消" class="reg jc yahei18" />
</div>
</form>
用form标签,设置取消按钮为type=reset ,点击会重置信息
登录按钮的checkLogin()事件
1.获取用户名和密码
2.判断是否输入空
3.发送ajax请求
function checkLogin() {
// 1、得到用户名和密码
var userName = $("#userName").val();
var userPwd = $("#userPwd").val();
// 2、判断用户名称和密码,为空显示提示信息
if (isEmpty(userName)) {
$("#msg").html("* 用户名称不能为空!");
return;
}
$("#msg").html("");
if (isEmpty(userPwd)) {
$("#msg").html("* 用户密码不能为空!");
return;
}
$("#msg").html("");
// 判断是否记住密码
var rem = 0; // 不选中
if ($("#rem").prop("checked")) { // 选中
rem = 1;
}
// 发送ajax请求
$.ajax({
url:"user",
type:"post",
data:{action:"login",userName:userName,userPwd:userPwd,rem:rem},
dataType:"json",
success:function(result) {
console.log(result);
// 判断是否登录成功 code=1成功,code=0失败
if (result.code == 1) {
// 跳转到首页
window.location.href = "index";
} else {
$("#msg").html(result.msg);
}
}
});
}
val获取input里面的value值
.prop:返回的是true或者false 设置记住密码按钮input属性为checkbox prop("checked")选中rem为1
三个值都获取到了,发送ajax请求
ajax的格式:
$.ajax({
url:servlet的路径
type:请求方式,get/post
data:{获取值的键值对}
success:成功后返回的方法function(返回的结果参数){
判断是否成功:
成功window.location.href=""
}
})