ajax 实现用户登录验证

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

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

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


步骤:

1、加入jar包

用于输出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<Admin> 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;

}


最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容