利用Ajax实现增删改查
准备：
1，order类：
class Order(models.Model): '''订单''' oid = models.CharField(verbose_name="订单号", max_length=64) title = models.CharField(verbose_name="名称", max_length=32) price = models.DecimalField(verbose_name="价格", max_digits=10, decimal_places=2, default=0) status_choices = ( (1, "待支付"), (2, "已支付"), ) status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=1) admin=models.ForeignKey(verbose_name="管理员",to="Admin",on_delete=models.CASCADE)
使用orm创建表
2，order.py
一，增加
1，对话框
方法一：基于html方法显示对话框：
方法二：基于Ajax方法显示对话框：
2，保存数据
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
<input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary">
</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">
{% for field in form %}
<div class="col-xs-6">
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label>{{ field.label }}</label>
{{ field }}
<span class="error-msg" style="color: red;position: absolute;"></span>
</div>
</div>
{% endfor %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="btnSave" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
$(function () {
bindBtnAddEvent();
bindBtnSaveEvent();
})
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//点击新建按钮，显示对话框
$("#myModal").modal("show");
});
}
function bindBtnSaveEvent() {
$("#btnSave").click(function () {
$.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) {
{#console.log(name,data)#}
{#提示错误信息#}
$("#id_" + name).next().text(errorList[0]);
})
}
}
})
});
}
</script>
{% endblock %}
# -*- coding = utf-8 -*- # @Time : 2022/4/14 17:06 # @Author : 舒奇 # @File : order.py # @Software : PyCharm import json import random from datetime import datetime from django.http import JsonResponse from django.shortcuts import render, HttpResponse from django.views.decorators.csrf import csrf_exempt from app01 import models from app01.utils.bootstrap import BootStrapModelForm class OrderModelForm(BootStrapModelForm): class Meta: model = models.Order # fields="__all__" # fields=[] exclude = ["oid", "admin"] def order_list(request): '''订单列表''' form = OrderModelForm() return render(request, "order_list.html", {"form": form}) @csrf_exempt def order_add(request): '''新建订单(Ajax请求）''' form = OrderModelForm(data=request.POST) if form.is_valid(): # 设置订单号 form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000, 9999)) # 设置管理员 form.instance.admin_id = request.session["info"]["id"] # 保存到数据库中 form.save() # return HttpResponse(json.dumps({"status":True})) return JsonResponse({"status": True}) return JsonResponse({"status": False, "error": form.errors})
二，查（列表页面）
def order_list(request): '''订单列表''' queryset=models.Order.objects.all().order_by('-id') form = OrderModelForm() # 分页 page_object = Pagination(request, queryset, page_size=5) context = { "queryset": page_object.page_queryset, # 数据 "page_string": page_object.html, # 分页框 "form":form } return render(request, "order_list.html", context)
{# 订单列表 #} <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 订单列表 </div> <!-- Table --> <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 obj in queryset %} <tr> <th>{{ obj.id }}</th> <td>{{ obj.oid }}</td> <td>{{ obj.title }}</td> <td>{{ obj.price }}</td> <td>{{ obj.get_status_display }}</td> <td>{{ obj.admin.username }}</td> <td> <a class="btn btn-primary btn-xs" href="#">编辑</a> <a class="btn btn-danger btn-xs" href="#">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- 分页功能 --> <ul class="pagination"> {{ page_string }} </ul>
三，删除
四，编辑
class Order(models.Model): '''订单''' oid = models.CharField(verbose_name="订单号", max_length=64) title = models.CharField(verbose_name="名称", max_length=32) price = models.DecimalField(verbose_name="价格", max_digits=10, decimal_places=2, default=0) status_choices = ( (1, "待支付"), (2, "已支付"), ) status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=1) admin=models.ForeignKey(verbose_name="管理员",to="Admin",on_delete=models.CASCADE)
#url.py
#订单管理
path("order/list",order.order_list),
path("order/add",order.order_add),
path("order/delete",order.order_delete),
path("order/edit",order.order_edit),
path("order/detail",order.order_detail),
#order.py
import json
import random
from datetime import datetime
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from app01.utils.pagination import Pagination
class OrderModelForm(BootStrapModelForm):
class Meta:
model = models.Order
# fields="__all__"
# fields=[]
exclude = ["oid", "admin"]
def order_list(request):
'''订单列表'''
queryset=models.Order.objects.all().order_by('-id')
form = OrderModelForm()
# 分页
page_object = Pagination(request, queryset, page_size=5)
context = {
"queryset": page_object.page_queryset, # 数据
"page_string": page_object.html, # 分页框
"form":form
}
return render(request, "order_list.html", context)
@csrf_exempt
def order_add(request):
'''新建订单(Ajax请求）'''
form = OrderModelForm(data=request.POST)
if form.is_valid():
# 设置订单号
form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000, 9999))
# 设置管理员
form.instance.admin_id = request.session["info"]["id"]
# 保存到数据库中
form.save()
# return HttpResponse(json.dumps({"status":True}))
return JsonResponse({"status": True})
return JsonResponse({"status": False, "error": form.errors})
def order_delete(request):
'''删除订单'''
uid=request.GET.get("uid")
exists=models.Order.objects.filter(id=uid).exists()
if not exists:
return JsonResponse({"status":False,"error":"删除失败，数据不存在！"})
models.Order.objects.filter(id=uid).delete()
return JsonResponse({"status":True})
def order_detail(request):
""" 根据ID获取订单详细信息 """
# 方式1
"""
uid = request.GET.get("uid")
row_object = models.Order.objects.filter(id=uid).first()
if not row_object:
return JsonResponse({"status": False, 'error': "数据不存在。"})
# 从数据库中获取到一个对象 row_object
result = {
"status": True,
"data": {
"title": row_object.title,
"price": row_object.price,
"status": row_object.status,
}
}
return JsonResponse(result)
"""
# 方式2
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': "数据不存在。"})
# 从数据库中获取到一个对象 row_object
result = {
"status": True,
"data": row_dict
}
return JsonResponse(result)
@csrf_exempt
def order_edit(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 = OrderModelForm(data=request.POST, instance=row_object)
if form.is_valid():
form.save()
return JsonResponse({"status": True})
return JsonResponse({"status": False, 'error': form.errors})
#order_list.html
{% extends 'layout.html' %} {% block content %} <div class="container"> <div style="margin-bottom: 10px"> <input type="button" value="新建订单1" class="btn btn-success" data-toggle="modal" data-target="#myModal"> <input id="btnAdd" type="button" value="新建订单2" class="btn btn-success"> </div> {# 订单列表 #} <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 订单列表 </div> <!-- Table --> <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 obj in queryset %} <tr uid="{{ obj.id }}"> <th>{{ obj.id }}</th> <td>{{ obj.oid }}</td> <td>{{ obj.title }}</td> <td>{{ obj.price }}</td> <td>{{ obj.get_status_display }}</td> <td>{{ obj.admin.username }}</td> <td> <input uid="{{ obj.id }}" class="btn btn-primary btn-xs btn-edit" type="button" value="编辑"> <input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除"> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- 分页功能 --> <ul class="pagination"> {{ page_string }} </ul> </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"> {% for field in form %} <div class="col-xs-6"> <div class="form-group" style="position: relative;margin-bottom: 20px;"> <label>{{ field.label }}</label> {{ field }} <span class="error-msg" style="color: red;position: absolute;"></span> </div> </div> {% endfor %} </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="btnSave" type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> <!-- 删除订单（对话框） --> <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="alert alert-danger alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>是否确定删除？</h4> <p style="margin: 10px 0px;">删除后，所有关联数据都会被删除！</p> <p style="text-align: right;"> <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button> </p> </div> </div> </div> {% endblock %} {% block js %} <script type="text/javascript"> {# 全局变量#} var DELETE_ID; var EDIT_ID; $(function () { bindBtnAddEvent(); bindBtnSaveEvent(); bindBtnDeleteEvent(); bindBtnConfirmDeleteEvent(); bindBtnEditEvent(); }) function bindBtnAddEvent() { $("#btnAdd").click(function () { // 将正在编辑的ID设置为空 EDIT_ID = undefined; // 清空对话框中的数据 $("#formAdd")[0].reset(); // 设置对话框的标题 $("#myModalLabel").text("新建"); // 点击新建按钮，显示对话框。 $('#myModal').modal('show'); }); } function bindBtnSaveEvent() { $("#btnSave").click(function () { // 清除错误信息 $(".error-msg").empty(); if (EDIT_ID) { // 编辑 doEdit(); } else { // 添加 doAdd(); } }); } function doEdit() { // 向后台发送请求（添加的Ajax请求） $.ajax({ url: "/order/edit" + "?uid=" + EDIT_ID, // -> /order/edit?uid=12 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 doAdd() { // 向后台发送请求（添加的Ajax请求） $.ajax({ url: "/order/add", 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 { // 把错误信息显示在对话框中。 $.each(res.error, function (name, errorList) { $("#id_" + name).next().text(errorList[0]); }) } } }) } function bindBtnDeleteEvent() { $(".btn-delete").click(function () { //显示删除对话框 $("#deleteModal").modal("show"); //获取id DELETE_ID = $(this).attr("uid"); }) } function bindBtnConfirmDeleteEvent() { $("#btnConfirmDelete").click(function () { //点击确认按钮，将全局变量DELETE_ID发送到后台 $.ajax({ url: "/order/delete", type: "GET", data: { uid: DELETE_ID }, dataType: "JSON", success: function (res) { if (res.status) { //alert("删除成功！") //方法一： //隐藏删除框 // $("#deleteModal").modal('hide'); //在页面上将当前行数据删除(js) // $("tr[uid='"+DELETE_ID+"']").remove(); //要删除的ID置空 // DELETE_ID=0; //方法二：重新加载，刷新！ location.reload(); } else { //删除失败 alert(res.error) } } }) }); } function bindBtnEditEvent() { $(".btn-edit").click(function () { // 清空对话框中的数据 $("#formAdd")[0].reset(); var uid = $(this).attr("uid"); EDIT_ID = uid; // 发送Ajax去后端获取当前行的相关数据 /order/detail/?uid=123 $.ajax({ url: "/order/detail", type: "get", data: { uid: uid }, dataType: "JSON", success: function (res) { if (res.status) { // 将数据赋值到对话框中的标签中。 $.each(res.data, function (name, value) { $("#id_" + name).val(value); }) // 修改对话框的标题 $("#myModalLabel").text("编辑"); // 点击编辑，显示对话框 $('#myModal').modal('show'); } else { alert(res.error); } } }) }); } </script> {% endblock %}
浙公网安备 33010602011771号