一、ajax格式
详解
二、使用
1.前端
<form class="am-form" th:action="@{/updateUser}" th:method="post" id="pwdForm">
<input th:type="hidden" name="_method" value="PUT">
<input th:type="hidden" name="id" th:value="${user.id}">
<input th:type="hidden" name="username" th:value="${user.username}">
<div class="am-form-group">
<label >原密码</label>
<input type="text" id="oldPassword" class="am-radius" placeholder="原密码">
<span id="pwdText">*请输入原密码</span>
</div>
<div class="am-form-group">
<label >新密码</label>
<input type="text" id="newPassword" class="am-radius" placeholder="新密码">
<span id="newPwdText">*请输入新密码</span>
</div>
<div class="am-form-group">
<label >确认密码</label>
<input type="text" id="reNewPassword" name="password" class="am-radius" placeholder="确认密码">
<span id="reNewPwdText" >*请输入新确认密码,保证和新密码一致</span>
</div>
<button type="button" class="am-btn am-btn-primary" id="save">修改</button>
</form>
2.controller
@PutMapping("/updateUser")
public String updateUser(User user){
userMapper.updateUser(user);
return "redirect:/logout";
}
@ResponseBody
@GetMapping("/updateUser/{oldPwd}")
public Boolean checkPwd(HttpSession session, @PathVariable("oldPwd") String oldPwd){
User user = (User)session.getAttribute("loginUser");
if(user.getPassword().equals(oldPwd)){
return true;
}
return false;
}
3.jquery
<script type="text/javascript" th:inline="javascript">
$(function () {
var isCheck = false;
$("#oldPassword").blur(function () {
var oldPassword = $(this).val().trim();
if(!oldPassword) {
$('#pwdText').css('color', 'red');
isCheck = false;
return ;
}
var url = [[@{/updateUser/}]] + oldPassword;
$.ajax({
url: url,
dataType: 'json',
method: 'GET',
success: function (data) {
isCheck = data;
data ? $("#pwdText").replaceWith("<span id='pwdText'>*原密码正确</span>")
: $("#pwdText").replaceWith("<span id='pwdText' style='color: red'>*请填写原密码或填写错误</span>");
},
error: function () {
$('#pwdText').html("校验原密码异常");
isCheck = false;
}
});
});
$("#save").click(function () {
if(isCheck) {
if($("#newPassword").val() && $("#reNewPassword").val()
&& $("#newPassword").val() == $("#reNewPassword").val()) {
$("#pwdForm").submit();
}else{
$("#reNewPwdText").replaceWith("<span id='reNewPwdText' style='color: red'>*输入密码不一致</span>");
console.log($("#newPassword").val());
console.log($("#reNewPassword").val());
}
}
});
});