django - ajax 表单数据展示 | 表单数据添加 | 表单添加自带订单号与管理员 | 完整版 - 无编辑数据

1. html    其中 

 <td>{{ item.user.user }}</td>  关联表的字段名 

{% 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.user }}</td>

                    <td>
                      <a href="" class="btn btn-primary btn-xs">编辑</a>
                      <a href="" class="btn btn-danger btn-xs">删除</a>
                    </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>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function (){
            bindBntaddEvent();
            bindBntbtnSaveEvent()
        })

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

        function bindBntbtnSaveEvent(){
            $('#btnSave').click(function () {
                // 清楚所有错误信息
                $('.error-msg').empty()
                $.ajax({
                    url: '/order/add/',
                    type: 'post',
                    data:$('#saveform').serialize(),
                    dataType:'JSON',
                    success:function (res){
                        if(res.status){
                            alert('创建成功');
                            location.reload();
                        }else{
                            $.each(res.error, function (name, errorList) {
                                $('#id_' + name).next().text(errorList[0])
                            })
                        }
                    }
                })
            })
        }


    </script>
{% endblock %}

 

2. views 

from django.shortcuts import render,redirect

# 随机事件组合 时间 + 字符串
import random
from datetime import datetime

# 免除认证 发送消息
from django.views.decorators.csrf import csrf_exempt

# 返回json
from django.http import JsonResponse


from app import models
from app.utils.bootsrap import BootstrapModelForm


class OrderModelForm(BootstrapModelForm):
    class Meta:
        model = models.Order
        #fields = '__all__'
        exclude = ['oid', 'user']

'''表单列表'''
def order_list(request):
    queryset = models.Order.objects.all().order_by('-id')
    form = OrderModelForm()
    context = {
        'form': form,
        'queryset': queryset,
    }
    return render(request, 'order.html', context)


''' 表单 添加数据 ajax 请求 '''
@csrf_exempt
def order_add(request):
    form = OrderModelForm(data=request.POST)
    if form.is_valid():

        # 字段中少一个订单号, 需要动态生成一个 手动设置订单号
        form.instance.oid = datetime.now().strftime('%Y%m%d%H%M%S') + str(random.randint(10000, 99999))
        # 自动 默认 选择当前用户为 用户名
        form.instance.user_id = request.session['info']['id']

        # 验证成功
        form.save()
        return JsonResponse({'status': True})
    # 验证失败
    return JsonResponse({'status': False, 'error': form.errors})

 

3. urls

    # 订单
    path('order/list/', order.order_list, name='order'),
    path('order/add/', order.order_add, name='/order/add/'),

 

4. model 

# 管理员
class Admin(models.Model):
    user = models.CharField(max_length=32, verbose_name='管理员')
    def __str__(self):
        return self.user

    pwd = models.CharField(max_length=64, verbose_name='密码')



# 订单
class Order(models.Model):
    oid = models.CharField(verbose_name='订单号', max_length=64)
    title = models.CharField(verbose_name='标题', max_length=64)
    price = models.IntegerField(verbose_name='价格')
    status_choices = (
        (1, '待支付'),
        (2, '已支付'),
    )
    status = models.SmallIntegerField(verbose_name='状态', choices=status_choices, default=1)
    user = models.ForeignKey(verbose_name='用户', to='Admin', on_delete=models.CASCADE)

 

5. 效果