如有错误欢迎指正
现在有一个需求,给页面增加一个修改密码的按钮。html代码如下
<div class="change_password_mb">
<div class="password_alert">
<h3 class="alert_title_h3">修改密码</h3>
<form action="">
<div class="input_info">
<label for="old_password">旧密码:</label>
<div class="input_box">
<input id="old_password" type="text">
</div>
</div>
<div class="input_info">
<label for="set_password">设置新密码:</label>
<div class="input_box">
<input id="set_password" type="text">
</div>
</div>
<div class="input_info">
<label for="sure_password">确认新密码:</label>
<div class="input_box">
<input id="sure_password" type="text">
</div>
</div>
<div class="button_box">
<button type="button" onclick="confirmButton();">确认</button>
</div>
</form>
</div>
</div>
其中几个input就是用户输入的内容,点击确认按钮就提交。接下来看一下confirmButton()
//确定按钮
function confirmButton(){
var old_password= $("#old_password").val(); //得到三个input中的内容
var set_password = $("#set_password").val();
var sure_password = $("#sure_password").val();
//判断新旧密码是否有问题
if(old_password==null || old_password == ""){
$("#old_password").focus();
return false;
}
if(set_password==null || set_password == ""){
$("#set_password").focus();
return false;
}
if(sure_password==null || sure_password == ""){
$("#sure_password").focus();
return false;
}
if(set_password!=sure_password){
$("#set_password").focus();
$("#sure_password").focus();
return false;
}
$.ajax({
type : "POST", //类型是post,还有get等类型
url : "${qdZh}/editPassword", //controller中用requestmapping做配对
dataType : "json", //数据类型是json
data:{
old_password : old_password,
set_password : set_password,
sure_password : sure_password
},
//controller中的函数做完操作之后会通知success
success : function(data) {
if(data.success == true){
// 設置cookie,uuid,怎么清除cookie
document.cleanCookie;
//setCookie("staffuuid",data.msg); //设置cookie还是更新cookie?
// 跳转
window.location.href="${qdZh}/login"; //跳到登录页面
}else{
alert(data.msg);
}
},
error : function(jqXHR) {
console.log("Error: " + jqXHR.status); //
}
});
}
接下来看一下controller中的函数做了什么
/*修改账户密码*/
@ResponseBody //responsebody表示,下方的函数需要对前端做出回应
@RequestMapping(value = "/editPassword") //与前端的url配对,成功就调用下方的函数
//AjaxJson是自己定义的类,用处理数据的。requestparam用在参数前面,前端的参数就可以传进来
public AjaxJson editPassword(@RequestParam(required = true) String old_password,
@RequestParam(required = true) String set_password,
@RequestParam(required = true) String sure_password,
HttpServletRequest request, HttpServletResponse response, Model model) {
// 获取账号,密码,进行登录
AjaxJson j = new AjaxJson();
j.setSuccess(false); //在开始操作之前,先将success设置为false
try {
if (old_password == null || old_password == "" || set_password == null || set_password == "" || sure_password == null || sure_password == "") {
j.setMsg("姓名、账号和密码不能为空!");
} else {
Cookie[] cookies = request.getCookies(); //获取浏览器的cookie
String staffuuid = "";
//获取cookie中的uuid
for (Cookie cookie : cookies) {
String cookiename = cookie.getName();
if (cookiename.equals("staffuuid")) {
staffuuid = cookie.getValue();
}
}
//用从cookies获取的uuid,从seession中找到用户
QdStaffUser user = (QdStaffUser) request.getSession().getAttribute(staffuuid);
//获取用户名和密码
String username = user.getUsername();
String password = user.getPassword();
//判断旧密码是否正确,直接和从session拿到的密码比较
if(sure_password == password){
//ajaxjson可以设置为true了
j.setSuccess(true);
//设置用户的密码
user.setPassword(sure_password);
//调用service将这个user的信息存进数据库
qdStaffUserService.save(user);
//清除cookie然后跳转到登录界面(这一步在jsp文件中操作)
}else{
j.setMsg("旧密码不正确");
}
}
} catch (Exception e) {
j.setMsg("系统异常!");
e.printStackTrace();
}
return j;
}
执行j.setSuccess(true)之后,jsp文件中的success:function()才会执行。
如有错误欢迎指正。