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>
标签：status,function,name,form,models,django,Ajax,添加,import From： https://www.cnblogs.com/p4567/p/17776463.html