一、记·修改用户密码功能实现
1. 新建页面 profile.jsp，添加三个输入框和提交按钮：用户输入当前密码、输入新密码、再次确认密码和重置按钮、修改密码按钮；
2. 前台 JavaScript 校验用户输入通过后触发 Ajax 请求至后台；
3. 后台（这里使用 SSM 框架实现）在 UserMapper.xml 写 SQL 语句实现，接着是 UserDao.java、UserService.java 和 UserServiceImpl.java 的接口实现；
4. 后台控制器 UserAction.java 实现，请求路径、请求参数、返回值实现。
二、相关代码示例
1. profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>修改密码-系统后台管理</title> <!-- <jsp:include page="_css.jsp" /> --> <!-- <link rel="stylesheet" type="text/css" href="<%=path%>/view/assets/javascript/editor.css"/> --> <!-- 外部样式 --> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <!-- 内部样式 --> <style type="text/css"> .errorMsg { color: red; } .error { border: 1px solid red; } .password-input { width: 400px; hight: 25px !importent; margin-top: 5px; } .btn { vertical-align: middle; text-align: center; margin-top: 30px; width: 50%; } </style> </head> <body> <!-- <jsp:include page="_header.jsp" /> --> <div> <h3>修改用户密码</h3> <div> <label>当前密码</label></br> <input type="password" class="password-input" id="current_password" name="current_password" placeholder="密码长度为6-16个字符，由英文大小写字母、数字、符号组成" > <span id="currentMsg" class="errorMsg"></span> </div> <div style="margin-top: 15px;"> <!-- 内联样式 --> <label>新密码</label></br> <input type="password" class="password-input" id="new_password" name="new_password" placeholder="新密码不能当前密码相同" > <span id="newMsg" class="errorMsg"></span> </div> <div style="margin-top: 15px;"> <label>确认密码</label></br> <input type="password" class="password-input" id="confirmation_password" name="confirmation_password" placeholder="确认密码与新密码保持一致" > <span id="confirmMsg" class="errorMsg"></span> </div> <div class="btn"> <input type="reset" value="重置" onclick="clearInput();"></i> <input type="button" value="修改密码" onclick="checkInput();"></i> </div> </div> <!-- <jsp:include page="_footer.jsp" /> --> <!-- <jsp:include page="_js.jsp"> <jsp:param value="true" name="enableScript" /> </jsp:include> --> <!-- <script type="text/javascript" src="<%=path%>/view/assets/javascript/editor.js"></script> --> <script type="text/javascript"> var flag = true; function clearInput() { $("#current_password").val(""); $("#new_password").val(""); $("#confirmation_password").val(""); clearErrorMsg(); } function clearErrorMsg() { $("#currentMsg").html(""); $("#newMsg").html(""); $("#confirmMsg").html(""); $("#current_password").removeClass("error"); $("#new_password").removeClass("error"); $("#confirmation_password").removeClass("error"); } function checkInput() { clearErrorMsg(); var currentPassword = $("#current_password").val(); var newPassword = $("#new_password").val(); var confirmPassword = $("#confirmation_password").val(); checkPwdLength(currentPassword, "currentMsg", "current_password"); checkPwdLength(newPassword, "newMsg", "new_password"); checkPwdLength(confirmPassword, "confirmMsg", "confirmation_password"); if (flag) { $.post("<%=path%>/user/updatePassword", { currentPassword : currentPassword, newPassword : newPassword }, function(data) { if ("success" == data) { alert("密码修改成功，请使用新密码重新登陆！"); window.location.href="<%=path%>/login"; } else { $("#currentMsg").html(data); $("#current_Password").addClass("error"); } }); } } function checkPwdLength(obj, msg, id) { if ("" == obj) { $("#" + msg).html("该项不能为空！"); $("#" + id).addClass("error"); flag = false; } else if (6 > obj.length || obj.length > 16) { $("#" + msg).html("密码长度为6-16个字符！"); $("#" + id).addClass("error"); flag = false; } else if($("#current_password").val() == $("#new_password").val()) { $("#newMsg").html("新密码不能当前密码相同！"); flag = false; } else if ($("#new_password").val() != $("#confirmation_password").val()) { $("#confirmMsg").html("两次输入的密码不一致！"); flag = false; } else { flag = true; } } </script> </body> </html>