django——Ajax（添加/编辑）
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})
# 获取修改数据
def order_edit(request):
uid = request.GET.get('uid')
row_dict = models.Order.objects.filter(id=uid).values('title', 'price', 'status').first()
if not row_dict:
return JsonResponse({"status": False, 'error': '数据不存在'})
result = {
'status': True,
'data': row_dict,
}
return JsonResponse(result)
# 从数据库获取到对象
# 编辑订单
@csrf_exempt
def order_EditSave(request):
uid = request.GET.get("uid")
row_object = models.Order.objects.filter(id=uid).first()
if not row_object:
return JsonResponse({"status": False, 'tips': '数据不存在'})
form=forms.orderModel(request.POST,instance=row_object)
if form.is_valid():
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
4. 编写 url
path('order_add/',views.order_add),
path('order_edit/',views.order_edit),
path('order_EditSave/',views.order_EditSave),
5. 编辑 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-success" data-toggle="modal">
{# <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"></button>#}
</div>
<div align="center">
<h1>数据列表</h1>
<hr>
{% csrf_token %}
<table class="table table-hover">
<thead>
<tr>
<td>id</td>
<td>订单号</td>
<td>名称</td>
<td>价格</td>
<td>状态</td>
<td>管理员</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{% for i in obj %}
<tr uid="{{ i.id }}">
<td>{{ i.id }}</td>
<td>{{ i.odi }}</td>
<td>{{ i.title }}</td>
<td>{{ i.price }}</td>
<td>{{ i.get_status_display }}</td>
<td>{{ i.admin.account }}</td>
<td>
<input uid="{{ i.id }}" type="button" class="btn btn-primary btn-xs btn-edit" 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">×</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>
<script src="{% static 'jquery-3.7.0.min.js' %}"></script>
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
// 全局变量
var EDIT_ID;
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
bindBtnEditEvent();
})
function bindBtnAddEvent(){
$('#btnAdd').click(function () {
//将正在编辑的ID 置空
EDIT_ID=undefined;
// 清空对话框
$("#formAdd")[0].reset();
//修改标题
$("#myModalLabel").text("新建");
$("#btnSave").text("添加");
// 点击新建按钮 显示对话框
$('#myModal').modal('show');
});
}
function bindBtnSaveEvent(){
$('#btnSave').click(function () {
// 清楚所有的错误信息
$('.error-msg').empty()
// 判断
if(EDIT_ID){
//编辑
doEdit();
}else {
//添加
doAdd();
}
});
}
// 新建
function doAdd(){
// 向后台发送请求(添加)
$.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');
// 刷新页面
location.reload();
}else {
// 把错误信息显示在对话框中
$.each(res.error,function (name,errorList){
$("#id_"+name).next().text(errorList[0])
})
}
}
})
}
// 编辑
function doEdit() {
// 发送 Ajax 去后台获取当前行的相关数据
$.ajax({
url:"/order_EditSave/?uid=" + EDIT_ID,
type:'post',
data:$('#formAdd').serialize(),
dataType:'JSON',
success:function (res){
if (res.status){
// 清空表单 ('#formAdd') jQuery 对象 -> $('#formAdd')[0] DOM 对象
$('#formAdd')[0].reset();
// 关闭对话框
$('#myModal').modal('hide');
// 刷新页面
location.reload();
}else {
if(res.tips){
alert(res.tips);
}else {
// 把错误信息显示在对话框中
$.each(res.error,function (name,errorList){
$("#id_"+name).next().text(errorList[0]);
})
}
}
}
})
}
function bindBtnEditEvent(){
$('.btn-edit').click(function () {
// 清空对话框中的数据
$("#formAdd")[0].reset();
var uid=$(this).attr("uid");
//赋值全局变量
EDIT_ID=uid
// 发送 Ajax 去后台获取当前行的相关数据
$.ajax({
url:"/order_edit/",
type:"get",
data:{
uid:uid
},
dataType:"JSON",
success:function (res) {
if(res.status){
console.log(res.data);
// 将获取到的数据默认赋值到输入框中
$.each(res.data,function (name,value) {
$("#id_"+name).val(value);
})
// 修改标题
$("#myModalLabel").text("编辑");
$("#btnSave").text("修改");
// 点击编辑 显示模态框
$('#myModal').modal('show');
}else {
alert(res.error)
}
}
})
// 在对话框中显示默认数据
});
}
</script>
</body>
</html>
浙公网安备 33010602011771号