这次给大家带来Ajax简单的实战案例，Ajax在实战中的注意事项有哪些，下面就是实战案例，一起来看一下。
我将实现一个简单的Ajax页面无刷新进行用户验证案例：
效果如下图：
实现主要过程：
在UsersAction类中的checkUser方法中接收并验证前台的表单数据，针对不同情况，返回一个状态码code给jsp页面，然后在ajax1.jsp中通过$.post方法接受后台传递过来的状态码
做出不同的响应。
具体代码如下：
1.实体类
package com.bean;import java.io.Serializable;public class Users implements Serializable { private String uname; private String passwd; public String getUname() { return uname; } public void setUname(String uname) { this.uname = uname; } public String getPasswd() { return passwd; } public void setPasswd(String passwd) { this.passwd = passwd; } public Users(String uname, String passwd) { super(); this.uname = uname; this.passwd = passwd; } public Users() { super(); }}
登录后复制
2.action类
package com.action;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;import org.apache.struts2.convention.annotation.Action;import com.bean.Users;public class UsersAction { private Users us; public Users getUs() { return us; } public void setUs(Users us) { this.us = us; } @Action(value="checkUser") public String checkUser() { System.out.println("aaaaaaaaa"); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); try { PrintWriter out = response.getWriter(); int code = 0; if (us == null) { out.print(0); return null; } else { if (us.getUname() == null || us.getUname().trim().equals("")) { code = 1; out.print(code); return null; } else { if (us.getPasswd() == null || us.getPasswd().trim().equals("")) { code = 2; out.print(code); return null; } else { code = 200; out.print(code); } } } out.flush(); out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; }}
登录后复制
3.ajax1.jsp
<base href="" rel="external nofollow" >Ajax练习 <!-- --> $(function() { $("#btok").click(function() { //获取数据 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("用户名和密码错误！"); return; } if(msg == '1') { $("#uerror").html("用户名错误！"); return; } else { $("#uerror").html("*"); } if(msg == '2') { $("#perror").html("密码错误！"); return; } else { $("#perror").html("*"); } if(msg == '200') { alert("登陆成功！"); return; } }); }); });
| 用户注册 | |
| 账号: | * |
| 密码: | * |
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
怎么用Ajax实现动态加载数据的功能
Ajax怎么实现上传文件的进度条Codular
以上就是Ajax简单的实战案例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776616.html
