我之前一直以为ajax就是局部刷新,现在才略微明白他是前端与后端异步交互的一种方式,其最大的优势在于不需要整个页面向后端发送请求,而可以提供我们需要与数据库比对的特定值给Servlet,
让Servlet一层一层往后调用方法获取数据库中的值进行比对,然后返回JSON给前端,前端利用后端传来的JSON进行判断并展示特定内容(JS实现)
JSON大概的样子--->{"":"","":""},类型于Map的形式,我们可以通过阿里巴巴的fastJSON依赖里的JSONArray.toJSONString()方法将Map转为JSON
下面代码以修改密码为例,利用ajax向Sevlet传递了旧密码的值,Servlet通过Session获取用户原密码,两者进行比较,将对应的情况值存入map,然后转为JSON传回前端,前端通过.键名获取键值,进行判断,最后展示
代码部分仅供参考
页面展示
<form action="userUpdate" method="get" id="userForm"> <input type="hidden" name="method" value="savepwd"> <label for="oldPassword">旧密码:</label><input type="password" name="oldPassword" id="oldPassword"><span style="color: red"></span><br/> <label for="newPassword">新密码:</label><input type="password" name="newPassword" id="newPassword"><span style="color: red"></span><br/> <label for="conNewPassword">确认新密码:</label><input type="password" name="conNewPassword" id="conNewPassword"><span style="color: red"></span><br/> <input type="button" name="save" id="save" value="确认修改"> </form>
核心代码1,Jquery
$(function () { var oldPassword = $("#oldPassword"); var newPassword = $("#newPassword"); var conNewPassword = $("#conNewPassword"); var saveBtn = $("#save"); oldPassword.on("blur",function () { $.ajax({ type:"GET", url:"userUpdate", //传参数给后台,参数名:参数值 data:{method:"pwdmodify",oldPassword:oldPassword.val()}, dataType:"json", success:function (data) { if(data.result == "true"){ oldPassword.next().css({"color":"green"}); oldPassword.next().html("正确"); oldPassword.VALIDATE_STATUS = true; }else if(data.result == "false"){ oldPassword.next().css({"color":"red"}); oldPassword.next().html("原密码输入不正确"); oldPassword.VALIDATE_STATUS = false; }else if(data.result == "sessionerror"){ oldPassword.next().css({"color":"red"}); oldPassword.next().html("当前用户session过期,请重新登录"); oldPassword.VALIDATE_STATUS = false; }else if(data.result == "error"){ oldPassword.next().css({"color":"red"}); oldPassword.next().html("旧密码不能为空"); oldPassword.VALIDATE_STATUS = false; } }, error:function (data) { oldPassword.next().css({"color":"red"}); oldPassword.next().html("请求错误"); oldPassword.VALIDATE_STATUS = false; } }); }).on("focus",function () { oldPassword.next().css({"color":"#666666"}); oldPassword.next().html("请输入旧密码"); oldPassword.VALIDATE_STATUS = false; }) saveBtn.on("click",function () { oldPassword.blur(); newPassword.blur(); conNewPassword.blur(); if(oldPassword.VALIDATE_STATUS==true){ if(confirm("确认要修改密码?")){ $("#userForm").submit(); } } }) });
核心代码2,Servlet部分
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String method = req.getParameter("method"); if(method.equals("pwdmodify")){ this.pwdModify(req,resp); }else if(method.equals("savepwd")){ this.savePwd(req,resp); } } private void pwdModify(HttpServletRequest req, HttpServletResponse resp) { Object o = req.getSession().getAttribute(Constant.USER_SESSION); String oldPassword = req.getParameter("oldPassword"); HashMap<String,String> resultMap = new HashMap<String,String>(); if(o==null){ resultMap.put("result","error"); }else if(StringUtils.isNullOrEmpty(oldPassword)){ resultMap.put("result","error"); }else { String userPassword = ((User) o).getPassword(); if (oldPassword.equals(userPassword)) { resultMap.put("result", "true"); }else{ resultMap.put("result","false"); } } try { resp.setContentType("application/json"); PrintWriter writer = resp.getWriter(); writer.write(JSONArray.toJSONString(resultMap)); writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } } private void savePwd(HttpServletRequest req, HttpServletResponse resp) { UserService userService = new UserServiceImpl(); String newPassword = req.getParameter("newPassword"); int id = ((User)req.getSession().getAttribute(Constant.USER_SESSION)).getId(); int result = userService.savePwd(newPassword,id); if(result>0){ req.getSession().removeAttribute(Constant.USER_SESSION); try { resp.sendRedirect(req.getContextPath()+"/Login.jsp"); } catch (IOException e) { e.printStackTrace(); } } }
实体类
public class User { private int id; private String username; private String password; private String remark; private int role_id; public User() { } public User(int id, String username, String password, String remark, int role_id) { this.id = id; this.username = username; this.password = password; this.remark = remark; this.role_id = role_id; } public User(String username, String password, String remark, int role_id) { this.username = username; this.password = password; this.remark = remark; this.role_id = role_id; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getRemark() { return remark; } public void setRemark(String remark) { this.remark = remark; } public int getRole_id() { return role_id; } public void setRole_id(int role_id) { this.role_id = role_id; } @Override public String toString() { return id+"--"+username+"--"+password+"--"+remark+"--"+role_id; } }
大致效果
From 西部开源