前端代码搭建

主要利用的是bootstrap3中js插件里的模态框版块

<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <h3 class="text-center">修改密码</h3>
                                            <div class="form-group">
                                                <label for="">用户名:</label>
                                                <input type="text" disabled value="{{ request.user.username }}" class="form-control" id="id_username">
                                            </div>
                                            <div class="form-group">
                                                <label for="">原密码:</label>
                                                <input type="text" id="old_password" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新密码:</label>
                                                <input type="password" id="id_password" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新密码:</label>
                                                <input type="text" id="confirm_password" class="form-control">
                                            </div>
                                            <span style="color:red;" id="error"></span>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal" >取消</button>
                                                <button type="button" class="btn btn-primary" id="commit">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                </div>
                            </div>
                        </div>

<script>
    $('#commit').click(function (){
        $.ajax({
            type:'post',
            url:'/set_password/',
            data:{
                'username':$('#id_username').val(),
                'old_password':$('#old_password').val(),
                'password':$('#id_password').val(),
                'confirm_password':$('#confirm_password').val(),
                'csrfmiddlewaretoken':'{{ csrf_token }}',
            },
            success:function (args){
                if (args.code==1000){
                    window.location.reload();
                }else {
                    $('#error').text(args.msg)
                }
            }
        })
    })
</script>

后端接收修改密码数据并提供错误提示

注意修改密码的视图函数必须是登录用户才能使用，所以需要一个@login_required装饰器

@login_required
def set_password(request):
    # 1.判断是否为ajax请求
    if request.method == 'POST':
        back_dic = {'code':1000,'msg':''}
        # 2.获取用户修改密码提交的数据
        username = request.POST.get('username')
        old_password = request.POST.get('old_password')
        password = request.POST.get('password')
        confirm_password = request.POST.get('confirm_password')
        # 3.对比原密码是否正确
        is_right = request.user.check_password(old_password)
        if is_right:
            # 4.判断两次密码是否一致
            if password == confirm_password:
                # 5.一致则修改密码
                request.user.set_password(password)
                request.user.save()
            else:
                back_dic['code'] = 1001
                back_dic['msg'] = '两次密码不一致'
        else:
            back_dic['code'] = 1002
            back_dic['msg'] = '原密码不正确'
        return JsonResponse(back_dic)