wordpress中文企业网站,百度网页版入口官网,成品网站源码68w68游戏,苏州市网站建设公司在文章“04 django管理系统 - 部门管理 - 新增部门”中#xff0c;我们通过传统的新增页面来实现部门的添加。
在本文中#xff0c;我们通过模态框和ajax来实现管理员的新增。
首先在admin_list.html中新建入口#xff0c;使用按钮
div classpanel-heading我们通过传统的新增页面来实现部门的添加。
在本文中我们通过模态框和ajax来实现管理员的新增。
首先在admin_list.html中新建入口使用按钮
div classpanel-headinginput typebutton classbtn btn-primary value新建管理员
/div
效果如下 我们希望点击【新建管理员】的时候跳一个弹框出来。我们从bootstrap官网随便扒拉一个模态框例子即可。
那么就需要给按钮设置data-toggle和data-target属性以及id
div stylemargin-bottom: 18pxinput typebutton classbtn btn-primary value新建管理员 data-togglemodaldata-target#myModal idbtn_add
/div
同时要给即将弹出的框子赋予同样的属性 div
!-- 新建订单弹框 --div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodalaria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabel我是被弹出来的对话框/h4/divdiv classmodal-body我是弹出来的内容1我是弹出来的内容2我是弹出来的内容3我是弹出来的内容4/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/div
/div
效果如下 接下来就需要绑定点击事件了。
{% block js %}script// 绑定btn_add的点击事件$(function () {bingBtnAddEvent();})function bingBtnAddEvent() {$(#btn_add).click(function () {// 点击新建管理员弹出模态框console.log(click btn_add);})}/script
{% endblock %}
效果如下 接着就需要把表单填入弹框。
我们回到admin.py中编辑业务逻辑
我们首先创建管理员的ModelForm
class AdminModelForm(BootStrapModelForm):class Meta:model models.Adminfields __all__
接着去修改业务逻辑看看能不能在前端接收到这个表格内容
1 我们创建form对象并且传递到前端界面
def admin_list(request):# return HttpResponse(admin_list is ok)# 查询所有的数据queryset models.Admin.objects.using(default).all()form AdminModelForm()context {queryset: queryset,form: form}return render(request, admin_list.html, context)
2 我们在前端界面接收一下
div!-- 新建订单弹框 --div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodalaria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabel我是被弹出来的对话框/h4/divdiv classmodal-body{{ form }}/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/div
/div
就是我箭头指向的部分 效果如下 为了后面方便操作表单以及美化界面我们把这个div装饰一下给个id
div classmodal-bodyform idformAdddiv classclearfix{% for field in form %}div classcol-xs-12div classform-groupstyleposition: relative;margin-bottom: 20px;label{{ field.label }}/label{{ field }}span classerror-msgstylecolor: red;position: absolute;/span/div/div{% endfor %}/div/form
/div
效果如下 我们把标题和按钮的名称都改一下
!-- 新建订单弹框 --
div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodalaria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabel新建管理员/h4/divdiv classmodal-bodyform idformAdddiv classclearfix{% for field in form %}div classcol-xs-12div classform-groupstyleposition: relative;margin-bottom: 20px;label{{ field.label }}/label{{ field }}span classerror-msgstylecolor: red;position: absolute;/span/div/div{% endfor %}/div/form/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取消/buttonbutton typebutton classbtn btn-primary保存/button/div/div/div
/div ok现在显示界面就出来了接下来的工作就是当用户点击保存的时候就把表单中的数据插入到数据库中去。
首先就是要分配idbtn_save div classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取消/buttonbutton typebutton classbtn btn-primary idbtn_save保存/button
/div
接着就是去绑定点击事件
script// 绑定btn_add的点击事件$(function () {// 新增按钮的点击事件bingBtnAddEvent();// 保存按钮的点击事件bindBtnSaveEvent();})function bingBtnAddEvent() {$(#btn_add).click(function () {// 点击新建管理员弹出模态框console.log(click btn_add);})}function bindBtnSaveEvent() {$(#btn_save).click(function () {alert(btn_save clicked 我被点击拉)})}
/script
效果如下 ok可以看到确实是点击成功了。
那么接下来我们就需要使用ajax悄咪咪的发送数据给后台
function bindBtnSaveEvent() {$(#btn_save).click(function () {{#alert(btn_save clicked 我被点击拉)#}// 下面是ajax提交表单数据提交到后台// 首先是批量获取表单数据let formData $(#formAdd).serialize();console.log(formData);})
} 可以看到确实有数据被console.log出来
接着就是发送请求了。
function bindBtnSaveEvent() {$(#btn_save).click(function () {{#alert(btn_save clicked 我被点击拉)#}// 下面是ajax提交表单数据提交到后台// 首先是批量获取表单数据let formData $(#formAdd).serialize();console.log(formData);// 发送ajax请求$.ajax({url: /admin/add/,type: post,data: formData,success: function (data) {console.log(data);}})})
}
然后去配置url路径 url: /admin/add/
urlpatterns [# 部门管理path(dept/list/, dept.dept_list),path(dept/add/, dept.dept_add),path(dept/int:nid/edit_detail/, dept.dept_editdetail),path(dept/int:nid/delete/, dept.dept_delete),path(dept/search/, dept.dept_search),# 管理员管理path(admin/list/, admin.admin_list),path(admin/add/, admin.admin_add),]
去admin.py里去定义函数admin_add()
def admin_add(request):pass
因为ajax发送的是post请求所以我们要免除csrf认证
csrf_exempt
def admin_add(request):pass
接下来就是数据校验部分了
csrf_exempt
def admin_add(request):处理管理员添加请求该函数主要用于接收POST请求数据并使用AdminModelForm进行数据验证和保存。通过Ajax方式提交请求时服务器需要返回JsonResponse以提供异步处理结果。参数:- request: HttpRequest对象包含了请求的相关信息如POST数据。返回:- 若表单验证成功返回包含status: True的JsonResponse表示添加成功。- 若表单验证失败返回包含status: False和错误信息的JsonResponse表示添加失败。# 首先获取数据form AdminModelForm(request.POST)if form.is_valid(): # 如果验证成功form.save()return JsonResponse({status: True})return JsonResponse({ # 如果验证失败status: False,error: form.errors})现在我们去前端ajax的success里面去看看
function bindBtnSaveEvent() {$(#btn_save).click(function () {{#alert(btn_save clicked 我被点击拉)#}// 下面是ajax提交表单数据提交到后台// 首先是批量获取表单数据let formData $(#formAdd).serialize();console.log(formData);// 发送ajax请求$.ajax({url: /admin/add/,type: post,data: formData,success: function (data) {console.log(data,我从admin_add函数成功返回);}})})
}
可以看到被接收成功了 接着我们去编写接收成功后的业务逻辑添加成功后自动刷新界面
function bindBtnSaveEvent() {$(#btn_save).click(function () {{#alert(btn_save clicked 我被点击拉)#}// 下面是ajax提交表单数据提交到后台// 首先是批量获取表单数据let formData $(#formAdd).serialize();console.log(formData);// 发送ajax请求$.ajax({url: /admin/add/,type: post,data: formData,dataType: json,success: function (data) {console.log(data, 我从admin_add函数成功返回);if (data.status True) {alert(添加成功)window.location.reload();} else {alert(添加失败)}}})})
} 我们来看看添加失败的情况
1 假设我什么都不填我看看啥情况 可以看到状态status的值是false同时提示添加失败。
2 假设我填写部分我看看啥情况 可以看到填写部分或者不填是会弹窗的。
但是我们应该在界面上提示用户。ok所以我们修改界面逻辑。
首先我们看看定位 我们可以看到输入框都是由id开头的拼接字段。
既然如此那么我们就遍历拼接。
function bindBtnSaveEvent() {$(#btn_save).click(function () {{#alert(btn_save clicked 我被点击拉)#}// 下面是ajax提交表单数据提交到后台// 首先是批量获取表单数据let formData $(#formAdd).serialize();console.log(formData);// 发送ajax请求$.ajax({url: /admin/add/,type: post,data: formData,dataType: json,success: function (data) {console.log(data, 我从admin_add函数成功返回);if (data.status True) {alert(添加成功)window.location.reload();} else {alert(添加失败)// 在弹出框中显示错误信息console.log(data.error);// 把错误信息显示在模态框中$.each(data.error, function (name, error_list) { // name就是字段名error_list就是错误信息列表// 根据字段名字找到对应的input标签然后显示错误信息$(#id_ name).next().text(error_list[0]);})}}})})
}
在form表单中添加span
form idformAdddiv classclearfix{% for field in form %}div classcol-xs-12div classform-groupstyleposition: relative;margin-bottom: 20px;label{{ field.label }}/label{{ field }}span classerror-msgstylecolor: red;position: absolute;/span/div/div{% endfor %}/div
/form
效果如下 并且我们要在每次点击之前先把错误信息清空。
function bindBtnSaveEvent() {// 点击之前清除错误信息$(.error-msg).empty()$(#btn_save).click(function () {{#alert(btn_save clicked 我被点击拉)#}// 下面是ajax提交表单数据提交到后台// 首先是批量获取表单数据let formData $(#formAdd).serialize();console.log(formData);// 发送ajax请求$.ajax({url: /admin/add/,type: post,data: formData,dataType: json,success: function (data) {console.log(data, 我从admin_add函数成功返回);if (data.status True) {alert(添加成功)window.location.reload();} else {alert(添加失败)// 在弹出框中显示错误信息console.log(data.error);// 把错误信息显示在模态框中$.each(data.error, function (name, error_list) { // name就是字段名error_list就是错误信息列表// 根据字段名字找到对应的input标签然后显示错误信息$(#id_ name).next().text(error_list[0]);})}}})})
}
自此我们完成了添加管理员并且是通过弹框以及ajax发送请求完成的添加。
