ajax 实现用户登录验证

目的:使用ajax实现异步登录页面验证

1.用户名/密码 keyup 时为空则提示不能为空

ajax 实现用户登录验证_第1张图片

2.点击提交按钮,判断用户名密码是否为空,为空则页面显示不能为空,不为空则提交到Action,Action里面执行数据库验证登录方法,成功则将code设为1,不成功为0,返回到页面的success方法。若code为0,则在页面显示用户名或密码错误。

ajax 实现用户登录验证_第2张图片

步骤:

1、加入jar包

ajax 实现用户登录验证_第3张图片

用于输出jason

2、加入jquery.js(Scripts/bootstrap/jquery-1.9.1.js)

3、在点击login按钮时触发事件

function checkLogin(){ 

//判断用户名是否为空

var adminname=$("#adminname").val().trim();

if(adminname==""||adminname.length<=0){

$("#spanadminname").html("Username is required!");

return;

}else{

$("#spanadminname").html("");

}

//判断密码是否为空

var adminpassword=$("#adminpassword").val().trim();

if(adminpassword==""||adminpassword.length<=0){

$("#spanadminpassword").html("Password is required!");

return;

}else{

$("#spanadminpassword").html("");

}

//提交到Action

$.ajax({

url: "AdminAction_login",      //相当于form表单里面的 action="AdminAction_login"

type: "POST",    //相当于form表单里面的 method="post"

//需要传到Action里面的值

data: {"admin.adminname":adminname,"admin.adminpassword":adminpassword },

dataType: "json",

success: function (result) {

if(result.code==1){

location.href="home/index.jsp";

}else{

$("#errorplace").show();

}

},

error: function () {

console.log("error");

}

});

4、Action里面

public String login() throws IOException{

response.setCharacterEncoding("utf-8");      //默认                 

JSONObject jb = new JSONObject();              //默认

List la= adminService.login(admin);

if(la.size()>0){

session.put("admin", la.get(0));

jb.put("code", 1);

}else{

jb.put("code", 0);

}

//默认

PrintWriter out=response.getWriter();

out.print(jb);

out.flush();

out.close();

return null;

}


你可能感兴趣的:(ajax 实现用户登录验证)