【Ajax】01-实现密码与数据库动态校验

一、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){
        //1、session中获取当前登录得User对象
        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 ;
            }
            //theymeleaf行内表达式
            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());
                }
            }

        });
    });