django学习入门系列之第十点《A 案例：员工管理系统21》

文章目录

16 Ajax(订单案例)
- 16.9 编辑
- - 想要去数据库中获取数据时:对象/字典
  - 将具体内容的错误信息传入到前端（Ajax）
  - 将数据库数据传入前端（Ajax）
  - - 清空新建订单的数据
- 16.10 编辑后保存
往期回顾

16 Ajax(订单案例)

16.9 编辑

点击编辑后，从数据库中拿数据

方式一：

function bindBtnEditEvent() {
            $(".btn-edit").click(function () {
                {#获取当前uid#}
                var uid = $(this).attr("uid");

                {#发送Ajax去后端获取当前行的相关数据,传到后台的值为 /order/detail/？uid=  #}
                $.ajax({
                    {#拼接字符串#}
                    url: "/order/detail/",
                    type: "get",
                    data: {
                        uid: uid
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            {#要当数据获取成功了才能展示对话框#}
                            {#记得要修改对话框的标题#}
                            $('#myModalLabel').text("编辑订单")
                            {#为了方便，公用一个对话框#}
                            $('#myModal').modal('show');

                        } else {
                            alert(res.error);
                            {#隐藏对话框#}
                            $("#myModal").modal('hide');
                            {#刷新页面#}
                            location.reload();
                        }
                    }
                })
                {#在对话框中默认看到#}
            })
        }

这样可以返回数据，自己构造出一个字典，但是缺点是比较麻烦

因为json进行序列化的时候，不支持对象，只支持python里面的数据类型

def order_detail(request):
    """根据id获取订单消息"""
    uid = request.GET.get("uid")
    row_object = models.Order.objects.filter(id=uid).first()
    if not row_object:
        return JsonResponse({"status": False, 'error': "数据不存在"})

    result = {
        "status": True,
        "data":{
          "title": row_object.title,
          "price": row_object.price,
          "status": row_object.status,
        }
    }
    return JsonResponse(result)

想要去数据库中获取数据时:对象/字典

在这里插入图片描述

因为first拿的是第一个，所以拿的是对象
如果是values_list,则拿的是元组

所以

frist  ------- 对象

values  ------- 字典

values_list  ------- 元组

方式二

def order_detail(request):
    """根据id获取订单消息"""
    uid = request.GET.get("uid")
    # 这样可以直接帮你构成一个字典，就不用自己写了
    row_object = models.Order.objects.filter(id=uid).values("title", "price", "status").first()
    if not row_object:
        return JsonResponse({"status": False, 'error': "数据不存在"})

    result = {
        "status": True,
        "data": row_object
    }
    return JsonResponse(result)

将具体内容的错误信息传入到前端（Ajax）

$.each(res.error, function (name, data) {
                                console.log(name, data);
                                $("#id_" + name).next().text(data[0]);
                            })

将数据库数据传入前端（Ajax）

$.each(res.data, function (name, data) {
                                console.log(name, data);
                                $("#id_" + name).val(data);})

清空新建订单的数据

因为新建和编辑用的是同一个对话框，所以当后端数据显示在前端的时候，新建对话框也会出现，所以要清除

$("#需要清除的表单")[0].reset();

$("#add_form")[0].reset();

所以，建议都默认先清空在获取值

16.10 编辑后保存

定义一个全局变量EDIT_ID

这个全局变量是编辑的id号
注意逻辑判断
	1：当是未定义的状态时，则为添加按钮
	2：当时定义状态的时候，则视为编辑保存的按钮

@csrf_exempt
def order_edit(request):
    uid = request.GET.get("uid")
    # 这样可以直接帮你构成一个字典，就不用自己写了
    row_object = models.Order.objects.filter(id=uid).first()
    # 这个是防止他整体数据不存在
    if not row_object:
        return JsonResponse({"status": False, 'tips': "数据不存在，请刷新重试"})

    form = OrderModelForm(data=request.POST, instance=row_object)
    if form.is_valid():
        form.save()
        return JsonResponse({"status": True})

    # 如果时error，希望把错误信息全部显示到下方，这个是字段的
    return JsonResponse({"status": False, 'error': form.errors})

{% extends 'model.html' %}
{% block content %}
    <div class="container">
        <div>
            <input id="Btnadd" type="button" value="新建订单" class="btn btn-success"/>
        </div>
    </div>
    <!-- 新建/编辑订单（对话框） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form id="add_form">
                        <div class="clearfix">
                            {% for foo in form %}
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label>{{ foo.label }} </label>
                                        {{ foo }}
                                        {# 添加一个绝对的定位，用来定位他的错误信息    #}
                                        <span class="error-msg" style="color: red; position: absolute"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btnSave" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除订单（对话框） -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>是否确定要删除</h4>
                <p>删除后，所有关联的相关数据都会被删除</p>
                <p style="text-align: right">
                    <button type="button" id="btnConfigDelete" class="btn btn-danger">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </p>
            </div>
        </div>
    </div>

    <div class="bs-example container" data-example-id="panel-without-body-with-table">
        <div class="panel panel-default">
            <!-- Default panel contents -->

            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                订单列表
            </div>
            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>状态</th>
                    <th>订单号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>管理员</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for foo in queryset %}
                    <tr>
                        <th scope="row">{{ foo.id }}</th>
                        <td>{{ foo.get_status_display }}</td>
                        <td>{{ foo.oid }}</td>
                        <td>{{ foo.title }}</td>
                        <td>{{ foo.price }}</td>
                        <td>{{ foo.admin.username }}</td>
                        <td>
                            <a href="/admin/{{ foo.id }}/reset/">
                                重置密码
                            </a>
                        </td>
                        <td>
                            <input uid={{ foo.id }} type="button" value="编辑" class="btn btn-xs btn-primary btn-edit"/>
                            <input uid={{ foo.id }} type="button" value="删除"
                                   class="btn btn-xs btn-delete btn-danger"/>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {{ page_string }}
                </ul>
            </nav>
        </div>
        <div>
            <form method="get">
                <div class="input-group" style="width: 200px">
                    <input type="text" name="page" class="form-control" placeholder="页码">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">跳转</button>
                    </span>
                </div>
            </form>
        </div>
    </div>



{% endblock %}


{% block apply_js %}
    <script type="text/javascript">
        {# 创建一个全局变量用来记录用户是否要进行删除操作 #}
        var DELETE_ID;
        var EDIT_ID;

        $(function () {
            bindBtnEvent();
            bindBtnSaveEvent();
            bindBtnDeleteEvent();
            bindBtnEditEvent();
        })

        function bindBtnEvent() {
            $("#Btnadd").click(function () {
                {#如果不这样设置，则点编辑再点保存则会串号#}
                EDIT_ID = undefined;
                $("#add_form")[0].reset();
                $('#myModalLabel').text("新建订单")
                $('#myModal').modal('show')
            })
        }

        function bindBtnSaveEvent() {
            $("#btnSave").click(function () {

                $('.error-msg').empty()

                if (EDIT_ID) {
                    //编辑
                    Ed_add()
                } else {
                    //添加
                    Ne_add()
                }
            })
        }

        function Ed_add(){
             $.ajax({
                url: "/order/edit/" + "?uid=" + EDIT_ID,
                type: "post",
                {#这样相当于帮你把所有制都给传过去了#}
                data: $('#add_form').serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        alert("已成功保存");
                        {#清空表单 $("#add_form")是jQuery对象 -> S("#add_form")[0] DOM对象#}
                        $("#add_form")[0].reset();

                        {#隐藏对话框#}
                        $("#myModal").modal('hide');

                        {#刷新页面#}
                        location.reload()
                    } else {
                        if(res.tips){
                            {#防止他整体数据不存在#}
                            alert(res.tips);
                        }
                        else {
                        $.each(res.error, function (name, data) {
                            $("#id_" + name).next().text(data[0]);
                        })
                        }
                    }
                }
            })
        }

        {#新建保存的函数#}
        function Ne_add() {
            $.ajax({
                url: '/order/add/',
                type: "post",
                {#这样相当于帮你把所有制都给传过去了#}
                data: $('#add_form').serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        alert("已成功保存");
                        {#清空表单 $("#add_form")是jQuery对象 -> S("#add_form")[0] DOM对象#}
                        $("#add_form")[0].reset();

                        {#隐藏对话框#}
                        $("#myModal").modal('hide');

                        {#刷新页面#}
                        location.reload()
                    } else {
                        $.each(res.error, function (name, data) {
                            console.log(name, data);
                            $("#id_" + name).next().text(data[0]);
                        })
                    }
                }
            })
        }


        function bindBtnDeleteEvent() {
            $(".btn-delete").click(function () {
                // 点击按钮，显示对话框
                $('#deleteModal').modal('show')

                {# 获取当前id并赋值给全局变量   #}
                DELETE_ID = $(this).attr("uid");
            })
        }

        function bindBtnConfigDeleteEvent() {
            $("#btnConfigDelete").click(function () {
                // 点击确定删除按钮，将全局变量的值发送到后台
                $.ajax({
                    {#拼接字符串#}
                    url: "/order/" + DELETE_ID + "/delete/",
                    type: "get",
                    {#这样相当于帮你把所有制都给传过去了#}
                    data: $('#add_form').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            alert("已成功删除");
                            {#隐藏对话框#}
                            $("#myModal").modal('hide');
                            {#刷新页面#}
                            location.reload();

                            {# 将id重置  #}
                            DELETE_ID = 0

                        } else {
                            alert(res.error);
                            {#隐藏对话框#}
                            $("#myModal").modal('hide');
                            {#刷新页面#}
                            location.reload();
                        }
                    }
                })
            })
        }

        function bindBtnEditEvent() {
            $(".btn-edit").click(function () {
                $("#add_form")[0].reset();
                {#获取当前uid#}
                var uid = $(this).attr("uid");

                EDIT_ID = uid;

                {#发送Ajax去后端获取当前行的相关数据,传到后台的值为 /order/detail/？uid=  #}
                $.ajax({
                    {#拼接字符串#}
                    url: "/order/detail/",
                    type: "get",
                    data: {
                        uid: uid
                    },
                    dataType: "JSON",
                    success: function (res) {

                        if (res.status) {
                            $.each(res.data, function (name, data) {
                                console.log(name, data);
                                $("#id_" + name).val(data);
                            })
                            {#要当数据获取成功了才能展示对话框#}
                            {#记得要修改对话框的标题#}
                            $('#myModalLabel').text("编辑订单")

                            {#为了方便，公用一个对话框#}
                            $('#myModal').modal('show');

                        } else {
                            alert(res.error);
                            {#隐藏对话框#}
                            $("#myModal").modal('hide');
                            {#刷新页面#}
                            location.reload();
                        }
                    }
                })
                {#在对话框中默认看到#}
            })

        }
    </script>
{% endblock %}

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】
26.【案例登录】
27.【案例后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初了解】
39.【DOM的事件了解】
40.【jQuery初了解】
41.【jQuery寻找标签】
42.【jQuery寻找标签2】
43.【jQuery寻找标签(间接寻找)】
44.【案例菜单的切换】
45.【案例只能打开一个菜单】
46.【jQuery 简单操作】
47.【案例动态创建数据】
48.【案例点击获取文本】
49.【案例点击删除文本】
50.【案例表格操作】
51.【案例添加页面】
52.【初识MySQL】
53.【MySQL命令介绍一】
54.【MySQL命令介绍二】
55.【MySQL命令介绍三】
56.【案例：员工管理】
57.【案例 Flask+MySQL新增用户】
58.【案例 Flask+MySQL查询所有用户】
59.【初识 django】
60.【django的快速上手】
61.【django的模板语法】
62.【django的获取请求与响应】
63.【案例用户登录】
64.【django中数据库操作】
65.【django中数据库操作–创建与删除表】
66.【django中数据库操作–操作表中的数据】
67.【案例用户管理】
68.【A 案例：员工管理系统1】
69.【A 案例：员工管理系统2】
70.【A 案例：员工管理系统3】
71.【A 案例：员工管理系统4】
72.【A 案例：员工管理系统5】
73.【A 案例：员工管理系统6】
74.【A 案例：员工管理系统7】
75.【A 案例：员工管理系统8】
76.【A 案例：员工管理系统9】
77.【A 案例：员工管理系统10】
78.【A 案例：员工管理系统11】
79.【A 案例：员工管理系统12】
80.【A 案例：员工管理系统13】
81.【A 案例：员工管理系统14】
82.【A 案例：员工管理系统15】
83.【A 案例：员工管理系统16】
84.【A 案例：员工管理系统17】
85.【A 案例：员工管理系统18】
86.【A 案例：员工管理系统19】
86.【A 案例：员工管理系统20】