Ajax的简单实用实例代码

我将实现一个简单的埃阿斯页面无刷新进行用户验证案例：

效果如下图：

实现主要过程：

在用户角色类中的检查用户方法中接收并验证前台的表单数据，针对不同情况，返回一个状态码密码给jsp页面，然后在ajax1.jsp中通过$.邮政方法接受后台传递过来的状态码

做出不同的响应。

具体代码如下：

1.实体类

package com.bean导入Java。io。可序列化；公共类用户实现可序列化{私有字符串uname私有字符串密码；public String getUname(){ return uname；} public void setUname(String uname){ this。uname=uname} public String getPasswd(){ return passwd；} public void set passwd(String passwd){ this。passwd=passwd}公共用户（字符串uname，字符串passwd){ super()；this . uname=unamethis . passwd=passwd }公共用户(){超级()；}}2 .动作类

package com.action导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。http。HttpServletResponse导入组织。阿帕奇。支柱2。servletactioncontext导入组织。阿帕奇。支柱2。conventi on。注释。行动；导入com。比恩。用户；公共类用户活动{私有用户；public Users getUs(){ return us；} public void setUs(Users us){ this。us=us} @Action(值='checkUser ')公共字符串checkUser(){系统。出去。println(' aaaaaaaa ')；HttpServletResponse响应=servletactioncontext。getresponse()；回应。setcharacter encoding(' utf-8 ')；尝试{ PrintWriter out=响应。getwriter()；（同Internationalorganizations）国际组织代码=0;if(us==null){ out。打印(0)；返回null} else { if(us。getuname()==null | | us。getuname().修剪()。equals(" " { code=1；out.print(代码);返回null} else { if(us。getpasswd()==null | | us。getpasswd().修剪()。equals(" " { code=2；out.print(代码);返回null} else { code=200out.print(代码);} } }退出。flush()；出去。close()；} catch (IOException e) { //TODO自动生成的捕捉块e . print stack trace()；}返回null}}3.ajax1.jsp

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' rel='外部无跟随' title Ajax练习/title meta http-equiv=' pragma ' content=' no-cache ' meta http-equiv=' cache-control ' content=' no-cache ' meta http-equiv=' expires ' content=' 0 ' meta http-equiv=' keywords ' content=' keywords 1，keywords 2，keywords 3 ' meta http-equiv=' description ' content='这是我的页面！- link rel='样式表type=' text/CSS ' href=' style。CSS ' rel=' external no follow '-脚本类型=' text/JavaScript ' src=' http : js/jquery-1。9 .1 .js '/script script $(function(){ $(' # btok ')).单击(函数(){ //获取数据var uname=$('#uname ').val()；var passwd=$('#passwd ').val()；//将数据组织为json格式var json={'us.uname':uname，' us。passwd ' : passwd }；//进行异步请求$.post('checkUser.action '，json，function(msg){ if(msg==' 0 '){ alert('用户名和密码错误!');返回；} if(msg=='1') { $('#uerror ').html(")用户名错误！');返回；} else { $(' # ueror ').html(' * ')；} if(msg=='2') { $('#perror ').html(")密码错误!');返回；} else { $('#perror ').html(' * ')；} if(msg=='200') { alert('登陆成功!');返回；} });});});/script/head body表单名称=' form 1 '方法=' post '操作=' table width=' 450 '边框=' 1 ' align=' center '单元格填充=' 1 '单元格间距=' 0 ' tr TD colspan=' 2 ' align=' center ' valgn=' middle ' bgcolor=' # ' FFFFCC '用户注册/TD/tr/tr宽度='88 '账号：/TD TD width=' 352 ' label for=' uname '/label input type=' text ' name=' uname ' id=' uname ' span id=' ueerror ' style=' color : # F06； */span/td /tr tr td密码：/TD标签为=' passwd '/标签输入类型=' passwd ' name=' passwd ' id=' passwd ' span id=' perror ' style=' color : # F06；*/span/TD/tr tr align=' center ' valign=' middle ' bgcolor=' # FFFFCC ' TD col span=' 2 '输入类型=' button ' name=' button ' id=' btok ' value='确定输入类型='重置'名称='button2' id='button2 '值='重置/td /tr /table /form br /body/html以上所述是小编给大家介绍的埃阿斯的简单实用实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！