【补充】页面展示之多重模态框

【前端页面代码展示】

{% block info %}
<div class="container-fluid">
    <div class="row">
        <h3>基本信息</h3>

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <table class="table table-hover text-center">
                        <thead>
                            <tr>
                                <th class="text-center">用户名</th>
                                <th class="text-center">注册时间</th>
                                <th class="text-center">最后登录时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="info">{{ request.user.username }}</td>
                                <td class="success">{{ request.user.create_time|date:"Y-m-d H:i:s" }}</td>
                                <td class="danger">{{ request.user.last_login|date:"Y-m-d H:i:s" }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <h3>账号与安全</h3>
        <div class="list-group">
            <ul class="list-group ">
                {#         修改头像           #}
                <li class="list-group-item"
                    style="border-bottom: #E3B8B8FF solid 2px; border-top: none; border-left: none; border-right: none">
                    <div class="row align-items-center">
                        <div class="col-md-6 text-left">
                            <h4>头像</h4>
                        </div>
                        <div class="col-md-6 text-right">
                            <img src="/Source/{{ request.user.avatar }}/" alt="" style="width: 50px; height: 50px"
                                 class="img-circle">
                            <a href="{% url 'set_avatar' %}">
                                <img src="{% static 'img/edit.png' %}" alt=""
                                     style="width: 20px; height: 20px; margin-left: 10px" class="">
                            </a>
                        </div>
                    </div>
                </li>
                {#         修改密码模态框         #}
                <li class="list-group-item"
                    style="border-bottom:  #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
                    <div class="row align-items-center">
                        <h4>密码</h4>
                        <div class="col-md-6 text-left">

                            <input type="password" value="{{ request.user.password }}" class="form-control"
                                   style="border: none;outline: none" id="set_password">
                        </div>
                        <div class="col-md-6 text-right">
                            <a>
                                <img src="{% static 'img/edit.png' %}" alt="" href="#" id="set_password_a"
                                     style="width: 20px;height: 20px ;margin-left: 10px" class="">
                            </a>

                        </div>
                        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
                             aria-labelledby="myLargeModalLabel" id="set_password_model">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <h1 class="text-center">修改密码</h1>
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <div class="form-group">
                                                <label for="">用户名</label>
                                                <input type="text" disabled value="{{ request.user.username }}"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">原密码</label>
                                                <input type="password" id="id_old_password"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新密码</label>
                                                <input type="password" id="id_new_password"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">确认密码</label>
                                                <input type="password" id="id_confirm_password"
                                                       class="form-control">
                                            </div>
                                            <button type="button" class="btn btn-default pull-right"
                                                    data-dismiss="modal">
                                                取消修改
                                            </button>

                                            <button class="btn btn-danger center-block pull-right"
                                                    style="margin-bottom: 30px;margin-right: 10px" id="id_edit">
                                                确认修改
                                            </button>
                                            <span style="color: red" id="id_pwd_error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                {#         用户名           #}
                <li class="list-group-item"
                    style="border-bottom:  #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
                    <div class="row align-items-center">
                        <h4>用户昵称</h4>
                        <div class="col-md-6 text-left">
                            <input type="text" value="{{ request.user.username }}" class="form-control"
                                   style="border: none;outline: none" id="username_set">
                        </div>
                        <div class="col-md-6 text-right">
                            <img src="{% static 'img/edit.png' %}" alt="" id="username_set_a"
                                 style="width: 20px;height: 20px ;margin-left: 10px"
                                 class="">
                        </div>
                        <div class="modal fade bs-example-modal-lg model_username" tabindex="-1" role="dialog"
                             aria-labelledby="myLargeModalLabel" id="set_username_model">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <h1 class="text-center">修改昵称</h1>
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <div class="form-group">
                                                <label for="">原昵称</label>
                                                <input type="text" disabled value="{{ request.user.username }}"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新昵称</label>
                                                <input type="password" id="id_new_username"
                                                       class="form-control">
                                            </div>
                                            <button type="button" class="btn btn-default pull-right"
                                                    data-dismiss="modal">
                                                取消修改
                                            </button>

                                            <button class="btn btn-danger center-block pull-right"
                                                    style="margin-bottom: 30px;margin-right: 10px"
                                                    id="id_edit_username">
                                                确认修改
                                            </button>
                                            <span style="color: red" id="id_username_error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                {#         邮箱           #}
                <li class="list-group-item"
                    style="border-bottom:  #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
                    <div class="row align-items-center">
                        <h4>邮箱 </h4>
                        <div class="col-md-6 text-left">
                            <input type="text" value="{{ request.user.email }}" class="form-control"
                                   style="border: none;outline: none" id="email_set">
                        </div>
                        <div class="col-md-6 text-right">
                            <img src="{% static 'img/edit.png' %}" alt="" id="email_set_a"
                                 style="width: 20px;height: 20px ;margin-left: 10px"
                                 class="">
                        </div>
                        <div class="modal fade bs-example-modal-lg model_username" tabindex="-1" role="dialog"
                             aria-labelledby="myLargeModalLabel" id="set_email_model">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <h1 class="text-center">修改邮箱</h1>
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <div class="form-group">
                                                <label for="">原邮箱</label>
                                                <input type="text" disabled value="{{ request.user.username }}"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新邮箱</label>
                                                <input type="password" id="id_new_email"
                                                       class="form-control">
                                            </div>
                                            <button type="button" class="btn btn-default pull-right"
                                                    data-dismiss="modal">
                                                取消修改
                                            </button>

                                            <button class="btn btn-danger center-block pull-right"
                                                    style="margin-bottom: 30px;margin-right: 10px"
                                                    id="id_edit_email">
                                                确认修改
                                            </button>
                                            <span style="color: red" id="id_email_error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                {#         手机           #}
                <li class="list-group-item"
                    style="border-bottom:  #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
                    <div class="row align-items-center">
                        <h4>手机 </h4>
                        <div class="col-md-6 text-left">
                            <input type="text" value="{{ request.user.mobile }}" class="form-control"
                                   style="border: none;outline: none" id="mobile_set">
                        </div>
                        <div class="col-md-6 text-right">
                            <img src="{% static 'img/edit.png' %}" alt="" id="email_set_a"
                                 style="width: 20px;height: 20px ;margin-left: 10px"
                                 class="">
                        </div>
                        <div class="modal fade bs-example-modal-lg model_username" tabindex="-1" role="dialog"
                             aria-labelledby="myLargeModalLabel" id="set_mobile_model">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <h1 class="text-center">修改手机</h1>
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <div class="form-group">
                                                <label for="">原手机号</label>
                                                <input type="text" id="id_old_mobile"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新手机号</label>
                                                <input type="password" id="id_new_mobile"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">确认手机号</label>
                                                <input type="text" id="id_confirm_password"
                                                       class="form-control">
                                            </div>
                                            <button type="button" class="btn btn-default pull-right"
                                                    data-dismiss="modal">
                                                取消修改
                                            </button>

                                            <button class="btn btn-danger center-block pull-right"
                                                    style="margin-bottom: 30px;margin-right: 10px"
                                                    id="id_edit_mobile">
                                                确认修改
                                            </button>
                                            <span style="color: red" id="id_mobile_error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}

【一】JQ未优化版本点击不同标签触发不同的模态框

$(document).ready(function () {
            $("#username_set").click(function () {
                $("#set_username_model").modal("show");
            });
            $("#username_set_a").click(function () {
                $("#set_username_model").modal("show");
            });
            $("#email_set_a").click(function () {
                $("#set_email_model").modal("show");
            });
            $("#email_set").click(function () {
                $("#set_email_model").modal("show");
            });
            $("#mobile_set_a").click(function () {
                $("#set_mobile_model").modal("show");
            });
            $("#mobile_set").click(function () {
                $("#set_mobile_model").modal("show");
            });
            $("#set_password").click(function () {
                $("#set_mobile_model").modal("show");
            });
            $("#set_password_a").click(function () {
                $("#set_password_model").modal("show");
            });

            function showModal(type) {
                // 通过判断type的值来触发不同的方法
                switch (type) {
                    case "username":
                        $("#set_username_model").modal("show");
                        break;
                    case "email":
                        $("#set_email_model").modal("show");
                        break;
                    case "mobile":
                        $("#set_mobile_model").modal("show");
                        break;
                    case "password":
                        $("#set_password_model").modal("show");
                        break;
                    default:
                        // 如果有其他类型，可以在这里处理
                        break;
                }
            }
        });

【二】JQ优化版本通过传递参数来触发不同的操作

$(document).ready(function () {
  // 存储选择器为变量
  var setUsernameModel = $("#set_username_model");
  var setEmailModel = $("#set_email_model");
  var setMobileModel = $("#set_mobile_model");
  var setPasswordModel = $("#set_password_model");

  // 绑定点击事件，通过传递参数来触发不同的操作
  $("#username_set, #username_set_a").click(function () {
    showModal("username");
  });

  $("#email_set, #email_set_a").click(function () {
    showModal("email");
  });

  $("#mobile_set, #mobile_set_a").click(function () {
    showModal("mobile");
  });

  $("#set_password, #set_password_a").click(function () {
    showModal("password");
  });

  function showModal(type) {
    // 通过判断type的值来触发不同的方法
    switch (type) {
      case "username":
        setUsernameModel.modal("show");
        break;
      case "email":
        setEmailModel.modal("show");
        break;
      case "mobile":
        setMobileModel.modal("show");
        break;
      case "password":
        setPasswordModel.modal("show");
        break;
      default:
        // 如果有其他类型，可以在这里处理
        break;
    }
  }
});

【三】发送Ajax请求传递数据未优化版本

$('#id_edit_username').click(function () {
            $.ajax({
                url: "/user/{{ request.user.username }}/set_username/",
                type: "post",
                data: {
                    "new_username": $("#id_new_username").val(),
                    "csrfmiddlewaretoken": "{{ csrf_token }}",
                },
                success: function (result) {
                    if (result.code === 1000) {
                        // 刷新页面
                        alert(result.message);
                        window.location.reload();
                    } else {
                        $("#id_username_error").text(result.message['new_username'][0])
                    }
                }
            })
        });

        $('#id_edit_email').click(function () {
            $.ajax({
                url: "/user/{{ request.user.username }}/set_email/",
                type: "post",
                data: {
                    "new_email": $("#id_new_email").val(),
                    "csrfmiddlewaretoken": "{{ csrf_token }}",
                },
                success: function (result) {
                    if (result.code === 1000) {
                        // 刷新页面
                        alert(result.message);
                        window.location.reload();
                    } else {
                        $("#id_email_error").text(result.message['new_email'][0])
                    }
                }
            })
        });

        //提交ajax请求
        $('#id_edit_mobile').click(function () {
            $.ajax({
                url: "/user/{{ request.user.username }}/set_mobile/",
                type: "post",
                data: {
                    "old_mobile": $("#id_old_mobile").val(),
                    "new_mobile": $("#id_new_mobile").val(),
                    "confirm_mobile": $("#id_confirm_mobile").val(),
                    "csrfmiddlewaretoken": "{{ csrf_token }}",
                },
                success: function (result) {
                    if (result.code === 1000) {
                        // 刷新页面
                        alert(result.message);
                        window.location.reload();
                    } else {
                        $("#id_pwd_error").text(result.message["new_mobile"][0])
                    }
                }
            })
        })

【四】发送Ajax请求传递数据未优化版本

// 提取公共部分，减少重复代码
function sendAjaxRequest(url, dataKey, successCallback, errorCallback) {
    $.ajax({
        url: url,
        type: "post",
        data: {
            ...dataKey,
            "csrfmiddlewaretoken": "{{ csrf_token }}",
        },
        success: function (result) {
            if (result.code === 1000) {
                // 刷新页面
                alert(result.message);
                window.location.reload();
            } else {
                errorCallback(result.message[dataKey][0]);
            }
        }
    });
}

$('#id_edit_username').click(function () {
    const url = "/user/{{ request.user.username }}/set_username/";
    const dataKey = {
        "new_username": $("#id_new_username").val(),
    };
    sendAjaxRequest(url, dataKey, function() {}, function (errorMessage) {
        $("#id_username_error").text(errorMessage);
    });
});

$('#id_edit_email').click(function () {
    const url = "/user/{{ request.user.username }}/set_email/";
    const dataKey = {
        "new_email": $("#id_new_email").val(),
    };
    sendAjaxRequest(url, dataKey, function() {}, function (errorMessage) {
        $("#id_email_error").text(errorMessage);
    });
});

$('#id_edit_mobile').click(function () {
    const url = "/user/{{ request.user.username }}/set_mobile/";
    const dataKey = {
        "old_mobile": $("#id_old_mobile").val(),
        "new_mobile": $("#id_new_mobile").val(),
        "confirm_mobile": $("#id_confirm_mobile").val(),
    };
    sendAjaxRequest(url, dataKey, function() {}, function (errorMessage) {
        $("#id_pwd_error").text(errorMessage);
    });
});

【五】后端接收需要修改的数据未优化

def set_info(request, **kwargs):
    user_obj = models.User.objects.filter(username=request.user).first()
    if not user_obj:
        return render(request, 'error.html')
    if kwargs:
        condition = kwargs.get('condition')
    else:
        return render(request, 'error.html')
    if request.is_ajax():
        if request.method == 'POST':
            back_dict = {"code": 1000, "message": ""}
            form_obj = None
            params_new = None
            if condition == "set_username":
                params_new = request.POST.get('new_username')
                form_obj = MyUsernameForm()
                form_obj = MyUsernameForm(request.POST)
                user_obj.username = params_new
            elif condition == "set_email":
                params_new = request.POST.get('new_email')
                form_obj = MyEmailForm()
                form_obj = MyEmailForm(request.POST)
                user_obj.email = params_new
            elif condition == "set_mobile":
                params_new = request.POST.get('new_mobile')
                form_obj = MyMobileForm()
                form_obj = MyMobileForm(request.POST)
                user_obj.mobile = params_new
            if form_obj.is_valid():

                user_obj.save()
                back_dict["message"] = "设置成功"

            else:
                back_dict["code"] = 1003
                back_dict["message"] = form_obj.errors
                print(back_dict)
            return JsonResponse(back_dict)

【六】后端接收需要修改的数据优化之根据不同的条件执行相应的操作

def set_info(request, **kwargs):
    # 获取当前用户对象
    user_obj = models.User.objects.filter(username=request.user).first()
    
    # 如果用户对象不存在，则返回错误页面
    if not user_obj:
        return render(request, 'error.html')
    
    # 检查是否提供了关键字参数
    if kwargs:
        condition = kwargs.get('condition')
    else:
        return render(request, 'error.html')
    
    # 检查是否为Ajax POST请求
    if request.is_ajax() and request.method == 'POST':
        back_dict = {"code": 1000, "message": ""}
        
        # 初始化表单对象和新参数
        form_obj = None
        params_new = None
        
        # 根据不同的条件执行相应的操作
        if condition == "set_username":
            params_new = request.POST.get('new_username')
            form_obj = MyUsernameForm(request.POST)
            user_obj.username = params_new
        elif condition == "set_email":
            params_new = request.POST.get('new_email')
            form_obj = MyEmailForm(request.POST)
            user_obj.email = params_new
        elif condition == "set_mobile":
            params_new = request.POST.get('new_mobile')
            form_obj = MyMobileForm(request.POST)
            user_obj.mobile = params_new
        
        # 检查表单是否有效
        if form_obj.is_valid():
            # 保存用户对象
            user_obj.save()
            back_dict["message"] = "设置成功"
        else:
            back_dict["code"] = 1003
            back_dict["message"] = form_obj.errors
            
        # 返回JSON响应
        return JsonResponse(back_dict)