Django Ajax 编辑订单

曾经的Songsong

已于 2024-07-02 11:17:37 修改

阅读量118

点赞数 3

文章标签： django ajax python

于 2024-07-02 11:02:21 首次发布

本文链接：https://blog.csdn.net/alexsong51/article/details/140120781

版权

方法一,增加新的模态框:

优点：逻辑简单

缺点：代码不简洁

注意点：复制新建订单的模态框后，要修改对应的各个id，不能与新建模态框的id重复

编辑模态框，注意各id信息一定要更改，不能与新增模态模框重复

<!-- 编辑订单 模态框 -->
    <div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <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="myModalLabel2">编辑</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单内容区域 -->
                    <form id="formEdit" novalidate="">
                        <div class="clearfix">
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative; margin-bottom: 20px">
                                    <label>名称:</label>
                                    <input type="text" name="title" class="form-control" required="" id="ed_title">
                                    <span class="error-msg" style="color:red; position: absolute"></span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative; margin-bottom: 20px">
                                    <label>价格:</label>
                                    <input type="number" name="price" class="form-control" required="" id="ed_price">
                                    <span class="error-msg" style="color:red; position: absolute"></span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative; margin-bottom: 20px">
                                    <label>支付状态:</label>
                                    <select name="status" class="form-control" id="ed_status">
                                        <option value="1" selected="">特支付</option>
                                        <option value="2">已支付</option>
                                    </select>
                                    <span class="error-msg" style="color:red; position: absolute"></span>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="Renew">更 新</button>
                </div>
            </div>
        </div>
    </div>

Jquery, Ajax提交

// JQuery绑定事件写法
        $(function () {
            //bindBtnAddEvent();
            // 删除事件,弹出模态确认框
            bindBtnDeleteEvent();
            // 删除事件
            bindBtnConfirmDeleteEvent();
            // 编辑事件 模态框获取内容
            bindBtnEditEvent();
            // 确认更新
            bindRenewEvent();

        })

// 编辑事件
        function bindBtnEditEvent() {
            // 类选择器
            $('.btn-edit').click(function () {
                //清空
                $('#formEdit')[0].reset();

                // alert('OK');
                // 根据属性拿到id
                EDIT_ID = $(this).attr('uid');
                console.log('选中的id是：' + '....' + EDIT_ID);
                // console.log(EDIT_ID);
                // 发送Ajax请求与后端进行交互      // /order/detail/?uid=123
                $.ajax({
                    url: '/order/detail/',
                    type: 'get',
                    // 传回后端数据
                    data: {
                        uid: EDIT_ID,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        // console.log(res);
                        if (res.status) {   // 成功执行
                            // 循环拿到后端数据，赋值给input框
                            $.each(res.info, function (name, value) {
                                console.log(name + '......' + value);
                                $('#ed_' + name).val(value);
                                // 显示模态框
                                $('#myModal_edit').modal('show');
                            })
                        } else {    // 失败执行
                            alert(res.error);
                        }
                    }
                })
            })
        }

        // 编辑事件  Ajax post 传递给后台
        function bindRenewEvent() {
            // id选择器
            $('#Renew').click(function () {
                // ajax将数据传递给后端
                $.ajax({
                    url: "/order/" + EDIT_ID + "/renew/",
                    type: 'post',
                    dataType: 'JSON',
                    // serialize() 对选中的form表单内容进行序列化,返回给后端
                    // 不用分别对每个input框使用 val() 取值
                    data: $('#formEdit').serialize(),
                    success: function (res) {
                        if (res.status) {
                            alert('更新完成');
                            $('#myModal_edit').modal('hide')
                            // 用JS实现整个页面刷新,
                            location.reload();
                        } else {
                            console.log(res.error);
                            $.each(res.error, function (key, value) {
                                console.log(key+'......'+value);
                                // #id选择器
                                $('#ed_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

urls.py

    path('order/detail/', order.order_detail),
    path('order/<int:nid>/renew/', order.order_renew),

views

def order_detail(request):
    """ 根据id获取订单详细信息 """

    """ 方法一 """
    """ 
    # 前端get请求，获得uid信息
    uid = request.GET.get('uid')
    # 根据id ,拿到当前行的对象，得到符合条件的 对象
    row_object = models.Order.objects.filter(id=uid).first()
    
    # 如果数据不存在
    if not row_object:
        return JsonResponse({'status': False, 'error': '修改失败,数据不存在'})
    else:   # 数据存在
        # 因为要用JSON传递数到前端，将需要的 字段生成字典格式
        result = {
            'title': row_object.title,
            'price': row_object.price,
            'status': row_object.status,
        }
        print(f"result:{result}")
        # JsonResponse 返回到前端
        return JsonResponse({'status': True, 'info': result})
    """

    """ 方法二 values()"""
    # 前端使用get请求，获得uid信息
    uid = request.GET.get('uid')
    # values()  返回一个Queryset对象，可遍历  列表里面是字典   为空的话  默认查出所有数据
    row_queryset = models.Order.objects.filter(id=uid).values('title', 'price', 'status')
    # <QuerySet [{'title': '空气净化器', 'price': 900, 'status': 2}]>
    # .first()  取第一条数据，直接变成了字典
    row_dict = models.Order.objects.filter(id=uid).values('title', 'price', 'status').first()
    # {'title': '空气净化器', 'price': 900, 'status': 2}
    if not row_dict:  # 数据不存在
        return JsonResponse({'status': False, 'error': '修改失败,数据不存在'})
    else:  # 数据存在
        print(row_dict)
        # JsonResponse 返回到前端
        return JsonResponse({'status': True, 'info': row_dict})

@csrf_exempt
def order_renew(request, nid):
    """ 更新数据 """
    # 根据nid需要修改的那行，对象
    row_object = models.Order.objects.filter(id=nid).first()
    print(type(row_object))
    print('选中的id是：', row_object.id)
    # 把要修改 的对象通过 instance 传入form组件中   必须为本类的对象
    # 如果 instance 有对象则是修改数据 没有就是 新增数据
    # data 来源数数据， instance 需要更新的数据
    form = OrderForm(data=request.POST, instance=row_object)
    if form.is_valid():
        # oid字段 保持不变,原有数据
        form.instance.oid = row_object.oid
        # admin_id字段 根据session得到当前用户
        form.instance.admin_id = request.session['info']['id']
        form.save()
        return JsonResponse({'status': True})
    else:
        print(form.errors)
        return JsonResponse({'status': False, 'error': form.errors})