python-ajax 删除表单数据

1. 静态页面

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

     <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
     新建表单基于bootsrap 内置代码显示
    </button>
    <hr/>

     <button type="button" class="btn btn-success" id="btnadd"> 新建表单基于js显示 </button>
    <hr/>

    <div class="panel panel-default">
            <div class="panel-heading">  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 表单列表</div>
            <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 item in queryset %}
                <tr>
                    <th scope="row">{{ item.id }}</th>
                    <td>{{ item.oid }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.get_status_display }}</td>
                    <td>{{ item.user.username }}</td>

                    <td>
                        <a href="" class="btn btn-primary btn-xs">编辑</a>
                        <input uid="{{ item.id }}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除">
                    </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
        </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 method="post" id="saveform" novalidate>

                    {% for field in form %}
                        <div class="form-group">
                            <label for="exampleInputEmail1"> {{ field.label }}</label>
                             {{ field }} <span style="color:red" class="error-msg">  </span>
                      </div>
                    {% endfor %}


                </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="btnSave"> 提交 </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="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-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="btnConfirmDelete" type="button" class="btn btn-danger">确定</button>
          </div>
        </div>
      </div>
    </div>





{% endblock %}

{% block js %}
    <script type="text/javascript">

        var DELETE_ID;

        $(function (){
            bindBntaddEvent();
            bindBntbtnSaveEvent();
            bindBntDeleteSaveEvent();

            bindBntConfirmDeleteSaveEvent();
        })

        function bindBntaddEvent(){
            $('#btnadd').click(function () {
                //点击展示页面 显示对话框
                $('#myModal').modal('show')
            })
        }

        function bindBntbtnSaveEvent(){
            $('#btnSave').click(function () {
                $.ajax({
                url: '/order/add/',
                type: 'post',
                // 获取表单中的所有数据
                data:$('#saveform').serialize(),
                dataType:'JSON',
                success:function (res){
                   $('.error-msg').empty();
                    if (res.status){
                        alert('添加成功');
                        //js刷新页面
                        location.reload();
                        //清空表单输入框里面的内容
                        //$('#myModal')[0].reset();
                        // js关闭对话框
                        //$('#myModal').modal('hide')
                     } else{
                        //console.log(res.error)
                        // 拿到错误数据 循环出来 键值对
                        $.each(res.error, function (name, data){
                            // 显示 需要的 name 与 data
                            //console.log(name, data)
                            // 拼接字符转id_title
                            $('#id_' + name).next().text(data[0]);
                        })
                     }
                }
                })
            })
        }

        function bindBntDeleteSaveEvent(){
            $('.btn-delete').click(function () {
                $('#deleteModal').modal('show')
                //  var uid = $(this).attr('uid');  // 获取当前uid
                DELETE_ID = $(this).attr('uid');

                //console.log(uid);  // 显示获取的id
            });
        }

        function bindBntConfirmDeleteSaveEvent(){
            $('#btnConfirmDelete').click(function () {
                // 点击删除按钮, 获取di
                $.ajax({
                    url:'/order/delete/',
                    type: 'GET',
                    data:{
                        uid:DELETE_ID
                    },
                    dataType:'JSON',
                    success: function (res){
                        if(res.status){
                            alert('删除成功');
                            //js刷新页面
                            location.reload();
                        }else{
                            alert(res.error);
                        }
                    }

                })
            });
        }


    </script>
{% endblock %}

 

2.　　views.py

 

'''表单删除'''
def order_delete(request):
    uid = request.GET.get('uid')
    print(uid)
    exists = models.Order.objects.filter(id=uid).exists()
    if not exists:
        return JsonResponse({'status': False, 'error': '删除失败 , 数据不存在'})
    models.Order.objects.filter(id=uid).delete()
    return JsonResponse({'status': True})