python - 弹出窗口 -表单提交 - 随机单号生成

 

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>
                      <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 () {
                $.ajax({
                url: '/order/add/',
                type: 'post',
                // 获取表单中的所有数据
                data:$('#saveform').serialize(),
                dataType:'JSON',
                success:function (res){
                   $('.error-msg').empty();
                    if (res.status){
                        alert('添加成功');
                        //js刷新页面
                        location.reload();
                     } 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]);
                        })
                     }
                }
                })
            })
        }


    </script>
{% endblock %}

 

2.　　views.py

 

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']
'''表单列表'''
def order_list(request):

    queryset = models.Order.objects.all().order_by('-id')

    form = OrderModelForm()

    context = {
        'form': form,
        'queryset': queryset,
    }

    return render(request, 'order_list.html', context )


''' 表单 添加数据 '''
@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.save()
        data_dict = {'status': True}
        return JsonResponse(data_dict)

    # 验证失败
    data_dict = {'status': False, 'error': form.errors}
    return JsonResponse(data_dict)

 

3.　　数据库 model.py

 

'''商品订单'''
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)