django——Ajax（添加）-JZTXT

1. 创建Model

class Order(models.Model):
    odi = models.CharField(verbose_name='订单号', max_length=64)
    title = models.CharField(verbose_name='名称', max_length=32)
    price = models.IntegerField(verbose_name='价格')
    status_choices = (
        (1, '待支付'),
        (2, '已支付'),
    )
    status = models.SmallIntegerField(verbose_name='状态', choices=status_choices, default=1)
    admin = models.ForeignKey(verbose_name='管理员', to='loguser', on_delete=models.CASCADE)

2. 创建ModelForm

class orderModel(forms.ModelForm):
    class Meta:
        model = models.Order
        # fields = '__all__'
        exclude=["odi","admin"]
        labels={
            'title':'名称',
            'price':'价格',
            'status':'状态',

        },
        widgets={
            'title':forms.TextInput(attrs={'class':'form-control'}),
            'price':forms.NumberInput(attrs={'class':'form-control'}),
            'status':forms.Select(attrs={'class':'form-control'}),
        }

3. 在views模块中编写后端代码

from django.shortcuts import render, redirect, HttpResponse
from . import forms
from . import models
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
import random
from datetime import datetime


@csrf_exempt
def order_add(request):
    form = forms.orderModel(request.POST)
    if form.is_valid():
        print(form.cleaned_data)
        form.instance.odi = datetime.now().strftime('%Y%m%d%H%M%S') + str(random.randint(1000, 9999))
        form.instance.admin_id=request.session['id']
        form.save()
        return JsonResponse({"status": True})

    return JsonResponse({"status": False, 'error': form.errors})

4. 编写HTML

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<link rel="stylesheet" type="text/css" href="{% static '/bootstrap/css/bootstrap.min.css' %}">

<body>
<div class="container ">
    <div>
        <!-- 点击按钮 -->
        <input type="button" id="btnAdd" value="新建订单" class="btn btn-primary" data-toggle="modal">
{#        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"></button>#}

    </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">×</span></button>
        <h4 class="modal-title" id="myModalLabel">新建</h4>
      </div>
      <div class="modal-body">
        <form id="formAdd">
        <div class="clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label>{{ form.title.label }}</label>
                    {{ form.title }}
                    <span class="error-msg" style="color: red"></span>

                </div>
            </div>

            <div class="col-xs-6">
              <div class="form-group">
                    <label>{{ form.price.label }}</label>
                    {{ form.price }}
                    <span class="error-msg" style="color: red"></span>
              </div>
            </div>

            <div class="col-xs-6">
              <div class="form-group">
                    <label>{{ form.status.label }}</label>
                    {{ form.status }}
                    <span class="error-msg" style="color: red"></span>
              </div>
            </div>

            <div class="col-xs-6">
              <div class="form-group">
                    <label>{{ form.admin.label }}</label>
                    {{ form.admin }}
                    <span class="error-msg" style="color: red"></span>
              </div>
            </div>
        </div>
        </form>
      </div>
      <div class="modal-footer">
          <button id="btnSave" type="button" class="btn btn-primary">添加</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

      </div>
    </div>
  </div>
</div>

</div>

<script src="{% static 'jquery-3.7.0.min.js' %}"></script>
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        bindBtnAddEvent();
        bindBtnSaveEvent();
    })
    function bindBtnAddEvent(){
        $('#btnAdd').click(function () {
            // 点击新建按钮 显示对话框
            $('#myModal').modal('show');
        });
    }

    function bindBtnSaveEvent(){
        $('#btnSave').click(function () {
            // 清楚所有的错误信息
            $('.error-msg').empty()
            // 向后台发送请求
            $.ajax({
                url:"/order_add/",
                type:'post',
                data:$('#formAdd').serialize(),
                dataType:'JSON',
                success:function (res){
                    if (res.status){
                        alert('创建成功');
                        // 清空表单 ('#formAdd') jQuery 对象 ->  $('#formAdd')[0] DOM 对象
                        $('#formAdd')[0].reset();

                        // 关闭对话框
                        $('#myModal').modal('hide');

                    }else {
                        // 把错误信息显示在对话框中
                        $.each(res.error,function (name,errorList){
                            $("#id_"+name).next().text(errorList[0])
                        })
                    }
                }
            })

        });
    }

</script>

</body>
</html>