django学习记录07——订单案例（复选框+ajax请求）

1.订单的数据表

1.1 数据表结构

在这里插入图片描述

1.2 数据表的创建

models.py

class Order(models.Model):"""订单号"""oid = models.CharField(max_length=64, verbose_name="订单号")title = models.CharField(max_length=64, verbose_name="名称")price = models.FloatField(verbose_name="价格")status_choice = ((1,"待支付"),(2,"已支付"),)status = models.SmallIntegerField(verbose_name="状态",choices=status_choice,default=1)admin = models.ForeignKey(verbose_name="管理员",to="Admin",on_delete=models.CASCADE)

status字段采用choice方式，获取值特别注意使用`get_status_display``

``admin`作为外键，使订单表与管理员连接，自动创建admin_id字段，采用级联删除方式。

获取admin表username字段的方法

直接 .字段
在admin中设置默认返回username，def __str__(self): return self.username

2.订单案例的实现

2.1 订单案例功能概述

将订单的展示、订单的增加、订单的更新、订单的删除等功能集成到一个页面中。增加和删除页面使用模态框实现，增删改查均使用Ajax请求进行数据传输。

2.2 订单案例总页面和列表展示功能

oeder_list

def order_list(request):queryset = models.Order.objects.all()form = OrderModelForm()page_object = Pagination(request, queryset)context = {'queryset': page_object.query_set,'form': form,'page_str': page_object.createHtml()}return render(request, "order_list.html", context)

queryset = models.Order.objects.all() 获取数据库数据

form = OrderModelForm() 向前端传输构造的表单，用与增加更新页面的形成

page_object = Pagination(request, queryset) 分页组件的应用

order_list.html

{% extends 'layout.html' %}{% block content %}...<!-- 新建 /编辑订单的对话框-->.........<!--删除订单的对话框-->.........<!-- 数据展示 --><div class="panel panel-default"><div class="panel-heading">订单列表</div><div class="bs-example" data-example-id="hoverable-table"><table class="table table-hover"><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><td>{{ obj.id }}</td><td>{{ obj.oid }}</td><td>{{ obj.title }}</td><td>{{ obj.price }}</td><td>{{ obj.get_status_display }}</td><td>{{ obj.admin.username }}</td><td>......</td></tr>{% endfor %}</tbody></table></div><ul class="pagination">{{ page_str }}</ul></div>
{% endblock %}{% block js %}
...
...
...
{% endblock %}

<td>{{ obj.get_status_display }}</td> choice字段的数据展示
<td>{{ obj.admin.username }}</td> 外键各字段的展示方法

<ul class="pagination"> {{ page_str }} </ul> 分页功能

2.3 订单增加与订单更新功能

由于增加和更新都是用复选框，而且一般情况下增加页面和更新页面可以各使用一个复选框，但本文将增加页面和更新页面集成到一个复选框中。

增加和更新功能集成到一个复选框中，并且两个功能都需要创建数据输入的表单。不同的是，增加功能相对较简单，更新功能需要获取待更新数据的id，并且将待更新数据旧数据填充到表单中

因此增加和更新功能复选框的区分标准是是否定义了待删除数据id

2.3.1 复选框的生成

order_list.html

{% extends 'layout.html' %}{% block content %}<div style="margin-bottom: 10px"><div><input type="button" class="btn btn-primary" value="新建订单1" data-toggle="modal" data-target="#Modal"><input id="addShow" type="button" class="btn btn-primary" value="新建订单2"></div></div><!-- 新建 /编辑订单的对话框--><div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><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"></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 %}
...
...
{% endblock %}

2.3.2复选框的内容

    <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="myModalLabel"></h4></div><div class="modal-body">正常的modelForm表单构造</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>

ModelForm的表单构造，由order_list视图函数传来的form来实现

2.3.3增加订单绑定复选框

<div><input type="button" class="btn btn-primary" value="新建订单1" data-toggle="modal" data-target="#Modal"><input id="addShow" type="button" class="btn btn-primary" value="新建订单2">
</div>

新建订单1按钮，采用官方文档给的唤醒复选框的方法 data-target="#Modal" 直接写复选框的id即可
新建订单2按钮，采用jQuery+js进行唤醒复选框

<script type="text/javascript">var UPDATE_ID;$(function () {//增加订单按钮bindBtnaddShow();})function bindBtnaddShow() {$('#addShow').click(function () {//由于添加和更新使用同一个对话框，每次点击要清除表单//成功后清除表单// $("#formAdd")jQuery对象无重置功能  $("#formAdd")[0] Dom对象，有重置功能$("#formAdd")[0].reset();//根据对话框的id，更改对话框标题$('#myModalLabel').text('新建订单');// 点击新建按钮，显示对话框$('#Modal').modal('show');})}</script>

加载页面自动执行函数
$(function () {//增加订单按钮bindBtnaddShow();
})
$('#addShow').click(function () { }) 将id为addshow的按钮绑定以下事件

$('#myModalLabel').text('新建订单'); 由于增加与更新共用复选框，因此可以根据不同请求对id为myModalLabel的标签的文本进行赋值

$('#Modal').modal('show'); 显示id=model的复选框

2.3.4 更新订单绑定复选框

<td><input uid="{{ obj.id }}" type="button" class="btn btn-warning btn-sm updateShow" value="编辑">
</td>

设置属性uid，表示待操作数据的id

<script type="text/javascript">//全局变量存储待更新/删除的订单idvar DELETE_ID;var UPDATE_ID;$(function () {bindBtnupdateShow();})function bindBtnupdateShow() {$('.updateShow').click(function () {//由于添加和更新使用同一个对话框，每次点击要清除表单//成功后清除表单// $("#formAdd")jQuery对象无重置功能  $("#formAdd")[0] Dom对象，有重置功能$("#formAdd")[0].reset();//获取待更新的数据idUPDATE_ID = $(this).attr('uid')//更新窗口需要展示待更新数据各字段，因此需要利用ajax请求获取相关信息$.ajax({url: '/order/details',type: 'get',data: {uid: UPDATE_ID,},dataType: 'JSON',success: function (res) {// 数据存在，弹出编辑对话框if (res.status) {//将对应数据填充到input输入框中$.each(res.data, function (name, value) {console.log(name, value);//找到id为id_name的下一个标签，对value赋值$("#id_" + name).val(value);})//根据对话框的id，更改对话框标题$('#myModalLabel').text('编辑订单');// 点击新建按钮，显示对话框$('#Modal').modal('show');} else {alert(res.error)}}})})}
</script>

加载页面自动执行函数

$(function () {//增加订单按钮bindBtnupdateShow();
})

更新复选框的展示

$('.updateShow').click(function () { }) 将class为updateshow的按钮绑定以下事件，使用class是因为每条数据均有一个更新按钮

获取待更新数据的基本信息并填充的到更新复选框的输入框中

UPDATE_ID = $(this).attr('uid') 获取待更新的数据id
更新窗口需要展示待更新数据各字段，因此需要利用ajax请求获取相关信息

$.ajax({url: '/order/details', //请求地址type: 'get',data: {uid: UPDATE_ID,     //传输带更改的数据id},dataType: 'JSON',success: function (res) { // 数据存在，弹出编辑对话框if (res.status) {//将对应数据填充到input输入框中$.each(res.data, function (name, value) {//找到id为id_name的下一个标签，对value赋值$("#id_" + name).val(value);})//根据对话框的id，更改对话框标题$('#myModalLabel').text('编辑订单');// 点击新建按钮，显示对话框$('#Modal').modal('show');} else {alert(res.error)}}})

getdetails视图函数

def order_details(request):uid = request.GET.get('uid')# 方式2 采用value 使查询数据库时按需返回并组成字典# 若不加first  返回queryset类型row_dict = models.Order.objects.filter(id=uid).values('title', 'price', 'status').first()print(row_dict)if not row_dict:data_dict = {'status': False, 'error': '数据不存在'}return HttpResponse(json.dumps(data_dict))data_dict = {'status': True,'data': row_dict,}print(json.dumps(data_dict))  # {"status": true, "date": {"title": "1111", "price": 2222.0, "status": 2}}return HttpResponse(json.dumps(data_dict))

根据id查询数据的两种方式

方式1 返回数据对象

 若不加first 返回queryset类型row_object = models.Order.objects.filter(id=uid).first()if not row_object:data_dict = {'status': False, 'error': '数据不存在'}return HttpResponse(json.dumps(data_dict))data_dict = {'status': True,'date': {'title': row_object.title,'price': row_object.price,'status': row_object.status,}}print(json.dumps(data_dict))  
# {"status": true, "date": {"title": "1111", "price": 2222.0, "status": 2}}return HttpResponse(json.dumps(data_dict))

方式2 采用value 使查询数据库时按需返回并组成字典

# 若不加first  返回queryset类型
# 加value和first  返回字典类型row_dict = models.Order.objects.filter(id=uid).values('title', 'price', 'status').first()print(row_dict)if not row_dict:data_dict = {'status': False, 'error': '数据不存在'}return HttpResponse(json.dumps(data_dict))data_dict = {'status': True,'data': row_dict,}print(json.dumps(data_dict))  # {"status": true, "date": {"title": "1111", "price": 2222.0, "status": 2}}return HttpResponse(json.dumps(data_dict))

主要使用方式二

订单字段主要有名称、订单号、价格、状态和负责人，对于订单号让系统自动生成、负责人由当前登录用户确定（在order_updat视图函数实现）

Ajax请求获取待修改数据的信息并打开复选框

//将对应数据填充到input输入框中
$.each(res.data, function (name, value) {
//找到id为id_name的下一个标签，对value赋值$("#id_" + name).val(value);
})
利用ModelForm生成的input输入框，id形式均为id_xxx，因此遍历视图函数传来的字典数据，并根据id给其value属性赋值

$('#Modal').modal('show'); 找到id为Model的复选框，显示

2.3.5 增加与更新的保存实现

order_list

{% extends 'layout.html' %}{% block content %}
...
...<!-- 新建 /编辑订单的对话框-->
...<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>
...<!--删除订单的对话框-->
...
...<!-- 数据展示 -->
...
...
{% endblock %}{% block js %}<script type="text/javascript">//全局变量存储待删除的订单idvar DELETE_ID;var UPDATE_ID;$(function () {...bindBtnSaveEvent();})function bindBtnSaveEvent() {$('#btnSave').click(function () {console.log(UPDATE_ID)if (UPDATE_ID) {//更新操作doUpdate();} else {//编辑操作doAdd();}})}function doAdd() {UPDATE_ID = 0;$(".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');//成功后刷新页面,更新展示列表location.reload();} else {$.each(res.errors, function (name, data) {// console.log(name,data);//找到id为id_name的下一个标签，给赋予文本$("#id_" + name).next().text(data[0]);})}}})}function doUpdate() {$.ajax({// 由于data传输的是整个表单，因此传输待修改的数据id时，利用urlurl: '/order/update' + '?uid=' + UPDATE_ID,type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success: function (res) {if (res.status) {location.reload();} else {$.each(res.errors, function (name, data) {// console.log(name,data);//找到id为id_name的下一个标签，给赋予文本$("#id_" + name).next().text(data[0]);})}}})}</script>
{% endblock %}

按钮绑定

data-dismiss="modal" 取消按钮绑定点击取消，关闭复选框

id="btnSave" 保存通过id绑定jQuery
        function bindBtnSaveEvent() {$('#btnSave').click(function () {console.log(UPDATE_ID)if (UPDATE_ID) {//更新操作doUpdate();} else {//编辑操作doAdd();}})}
根据保存按钮传来的UPDATE_ID来判断操作类型

2.3.5.1 增加

doAdd()

function doAdd() {UPDATE_ID = 0;$(".error-msg").empty();$.ajax({url: '/order/add',type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success: function (res) {if (res.status) {location.reload();} else {$.each(res.errors, function (name, data) {//找到id为id_name的下一个标签，给赋予文本$("#id_" + name).next().text(data[0]);})}}})}

order_add()

def order_add(request):form = OrderModelForm(request.POST)if form.is_valid():# 由于post请求未传来oid的数据，因此oid的数据需手动添加# print(form.cleaned_data) {'title': 'dadw', 'price': 123.0, 'status': 1, 'admin': <Admin: WYT>}# 随机生成oid(当前日期+四位随机数)oid = datetime.datetime.now().strftime('%Y%m%d%H%M') + str(random.randint(1000, 9999))########### 手动对某个字段添加数据的方法# form.instance.字段 = 数据form.instance.oid = oid# 对于管理员字段，自动填写为当前登录的用户，而不是用户输入# form.instance.admin_id = 当前用户登录的id（利用session）， admin为外键，默认生成admin_id# request.session.get('info')['id']————当前用户登录的idform.instance.admin_id = request.session.get('info')['id']form.save()data_dict = {'status': True}return HttpResponse(json.dumps(data_dict))data_dict = {'status': False, 'errors': form.errors}return HttpResponse(json.dumps(data_dict, ensure_ascii=False))

订单字段主要有名称、订单号、价格、状态和负责人，对于订单号让系统自动生成、负责人由当前登录用户确定

订单号

oid = datetime.datetime.now().strftime('%Y%m%d%H%M') + str(random.randint(1000, 9999)) 随机生成oid(当前日期+四位随机数)

手动对某个字段添加数据的方法

form.instance.字段 = 数据 form.instance.oid = oid

负责人

对于管理员字段，自动填写为当前登录的用户，而不是用户输入

form.instance.admin_id = 当前用户登录的id（利用session）， admin为外键，默认生成admin_id

request.session.get('info')['id']————当前用户登录的id

form.instance.admin_id = request.session.get('info')['id']

json返回

HttpResponse(json.dumps(data_dict, ensure_ascii=False))

等同于

return JsonResponse(data_dict)

2.3.5.2 更新

doUpdate()

function doUpdate() {$.ajax({url: '/order/update' + '?uid=' + UPDATE_ID,type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success: function (res) {if (res.status) {location.reload();} else {$.each(res.errors, function (name, data) {// console.log(name,data);//找到id为id_name的下一个标签，给赋予文本$("#id_" + name).next().text(data[0]);})}}})
}

url: '/order/update' + '?uid=' + UPDATE_ID,由于data传输的是整个表单，因此传输待修改的数据id时，利用url

order_update()

@csrf_exempt
def order_update(request):uid = request.GET.get('uid')print(uid)row_object = models.Order.objects.filter(id=uid).first()# 此处row_object 无需判断是否存在  查找待删除id的信息时已校验（order_details）form = OrderModelForm(data=request.POST, instance=row_object)if form.is_valid():form.save()data_dict = {'status': True}return HttpResponse(json.dumps(data_dict))data_dict = {'status': False,'errors': form.errors}return HttpResponse(json.dumps(data_dict))

2.4 订单的删除

2.4.1 删除确认复选框的显示

{% extends 'layout.html' %}{% block content %}
...
...<!--删除订单的对话框--><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"><h4>是否删除该数据！！！</h4><p style="text-align: right"><button type="button" class="btn btn-danger btnDelete">确 定</button><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button></p></div></div></div><!-- 数据展示 -->
....
....
<td>{# 设置属性uid，表示待操作数据的id #}<input uid="{{ obj.id }}" type="button" class="btn btn-warning btn-sm updateShow" value="编辑"><input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-sm deleteShow" value="删除">
</td>
....</div>
{% endblock %}

<input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-sm deleteShow" value="删除"> 此按钮绑定复选框显示，并且将待删除的数据通过属性uid传输。
       function bindBtndeleteShow() {$('.deleteShow').click(function () {$('#deleteModal').modal('show');//获取待删除订单的id// $(this)获取当前标签[$('.deleteShow')]//attr() 方法设置或返回被选元素的属性值   返回uid属性的值DELETE_ID = $(this).attr('uid')})}
$('.deleteShow').click(function () { }) 点击所有class为deleteShow的按钮执行以下操作

$('#deleteModal').modal('show'); 点击删除按钮，显示删除警告框

(this)获取当前标签[$('.deleteShow')]

attr() 方法设置或返回被选元素的属性值返回uid属性的值

DELETE_ID = $(this).attr('uid') 获取待删除订单的id

2.4.2 删除的实现

<!--删除订单的对话框--><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"><h4>是否删除该数据！！！</h4><p style="text-align: right"><button type="button" class="btn btn-danger btnDelete">确 定</button><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button></p></div></div></div>

<button type="button" class="btn btn-danger btnDelete">确定</button> 此按钮绑定删除Ajax请求

<button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 此按钮绑定取消复选框

function bindBtndeleteEvent() {$('.btnDelete').click(function () {$.ajax({url: '/order/delete', type: 'get',data: {uid: DELETE_ID},dataType: 'JSON',success: function (res) {if (res.status) {//alert("删除成功")//关闭删除框$('#deleteModal').modal('hide');//待删除的数据id置空DELETE_ID = 0;//更新展示数据，页面刷新location.reload();} else {alert(res.error)}}})})}

url: '/order/delete', 或 /order/delete?uid=? 或"/order/" + DELETE_ID + "/delete" uid的传输方法，data传输或者url传输

$('#deleteModal').modal('hide'); 关闭删除复选框

2.5 数据库获取数据方式对比

想要去数据库中获取数据时：对象/字典

对象，当前行的所有数据。

row_object = models.Order.objects.filter(id=uid).first()
row_object.id
row_object.title

字典，{“id”:1,“title”:“xx”}

row_dict = models.Order.objects.filter(id=uid).values("id","title").first()

queryset = [obj,obj,obj,]

queryset = models.Order.objects.all()

queryset = [ {‘id’:1,‘title’:“xx”},{‘id’:2,‘title’:“xx”}, ]

queryset = models.Order.objects.all().values("id","title")

queryset = [ (1,“xx”),(2,“xxx”), ]

queryset = models.Order.objects.all().values_list("id","title")