域名查询网站入口,网站建设培训 南宁,曰本免费网站,营销型网站开发公司电话提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 一、Ajax是什么#xff1f;二、使用步骤二、订单管理 提示#xff1a;以下是本篇文章正文内容#xff0c;下面案例可供参考
一、Ajax是什么#xff1f;
Ajax文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 一、Ajax是什么二、使用步骤二、订单管理 提示以下是本篇文章正文内容下面案例可供参考
一、Ajax是什么
AjaxAsynchronous JavaScript and XML是一种用于在不重新加载整个网页的情况下向服务器发送请求并接收响应的技术。它通过 JavaScript 来实现异步通信允许你在网页上动态地加载数据、更新内容和与服务器交互从而提升用户体验。
二、使用步骤
功能介绍 GET\POST以URL和表单的形式向浏览器发送请求并提交页面会刷新。 除此之外也可以基于Ajax向后台发送请求偷偷的发送请求。
依赖jQuery编写ajax代码
import json
from django.shortcuts import render
from django.http import HttpResponsefrom app01 import models
from app01.utils.pagination import Pagination
from app01.utils.form import TaskModelForm
from django.views.decorators.csrf import csrf_exempt
from app01.utils.bootstrap import BootstrapModelFormclass TaskModelForm(BootstrapModelForm):class Meta:model models.Taskfields __all__widgets {detail: forms.TextInput}def task_list(request):任务列表# 去数据库获取数据queryset models.Task.objects.all()page_object Pagination(request, queryset, page_size2)form TaskModelForm()context {form: form,page_string: page_object.html(), # 生成页码queryset: page_object.page_queryset,}return render(request, task_list.html, context)csrf_exempt
def task_ajax(request):print(request.GET)print(request.POST)data_dict {status: True, data: [11, 22, 33, 44]}return HttpResponse(json.dumps(data_dict))csrf_exempt
def task_add(request):print(request.POST)# 1.用户输入数据进行校验modelForm校验form TaskModelForm(datarequest.POST)if form.is_valid():form.save()data_dict {status: True}return HttpResponse(json.dumps(data_dict))data_dict {status: False, error: form.errors}return HttpResponse(json.dumps(data_dict, ensure_asciiFalse))
{% extends layout.html %}{% block content %}div classcontainerdiv classpanel panel-defaultdiv classpanel-heading表单/divdiv classpanel-bodyform idformAdddiv classclearfix{% for field in form %}div classcol-xs-6div classform-group,col-ms-2 stylemargin-bottom: 20px ;position:relative;{# div classform-control#}label{{ field.label }}/label{{ field }}span classerror-msg stylecolor: red;position: absolute/span/div/div{% endfor %}div classcol-xs-12button idbtnAdd1 typebutton classbtn btn-primary 提 交/button/div/div/form/div/divdiv classpanel panel-default stylemargin-top: 20px;!-- Default panel contents --div classpanel-headingdivspan classglyphicon glyphicon-th-list aria-hiddentrue 任务列表 /span/div/div!-- Table --table classtabletheadtrthid/thth标题/thth级别/thth负责人/thth操作/th/tr/theadtbody{% for obj in queryset %}trth{{ obj.id }}/thtd{{ obj.title }}/tdtd{{ obj.get_level_display }}/tdtd{{ obj.user_id }}/tdtda href# classbtn btn-primary btn-xs 编辑/aa href# classbtn btn-danger btn-xs 删除/a/td/tr{% endfor %}/tbody/table/divul classpagination{{ page_string }}/uldiv styleheight: 1000px/divhr/h2实例1/h2input typetext idtxtUser placeholder姓名input typetext idtxtAge placeholder年龄input typebutton idbtn1 value提交/div{% endblock %}{% block js %}script typetext/javascript$(function () {{# 页面加载完就自动执行#}bindBtnAdd1Event();bindBtn1Event();})function bindBtnAdd1Event() {$(#btnAdd1).click(function () {$(.error-msg).empty();$.ajax({url: /task/add/,type: post,data: $(#formAdd).serialize(),dataType: JSON,success: function (res) {if (res.status) {alert(添加成功);{#添加自动刷新#}location.reload();} else {$.each(res.error, function (name, data) {console.log(name, data)$(#id_ name).next().text(data[0]);})}}})})}function bindBtn1Event() {$(#btn1).click(function () {$.ajax({url: /task/add/,type: post,data: {user: $(#txtUser).val(),age: $(#txtAge).val()},dataType: JSON,success: function (res) {console.log(res);console.log(res.status);console.log(res.data);}})})}/script
{% endblock %}二、订单管理
注意 input id“btnAdd” type“button” value“新建订单2” class“btn btn-success” div class“clearfix”清除浮动 button id“btnSave” type“button” class“btn btn-primary”保 存/ button
#order_list.html
{% extends layout.html %}{% block content %}div classcontainerdiv
{# input typebutton value新建订单1 classbtn btn-primary data-togglemodal data-target#myModal#}input idbtnAdd typebutton value新建订单2 classbtn btn-success/divdiv classpanel panel-default stylemargin-top: 20px;!-- Default panel contents --div classpanel-headingdivspan classglyphicon glyphicon-th-list aria-hiddentrue 订单列表 /span/div/div!-- Table --table classtabletheadtrthid/thth订单号/thth名称/thth价格/thth状态/thth负责人/thth操作/th/tr/theadtbody{% for obj in queryset %}trth{{ obj.id }}/thtd{{ obj.oid }}/tdtd{{ obj.title }}/tdtd{{ obj.price }}/tdtd{{ obj.get_status_display }}/tdtd{{ obj.admin.username }}/tdtdinput uid{{ obj.id }} typebutton classbtn btn-primary btn-xs btn-edit value编 辑input uid{{ obj.id }} classbtn btn-danger btn-xs btn-delete typebuttonvalue删 除/td/tr{% endfor %}/tbody/table/divul classpagination{{ page_string }}/ul/div{#新建/编辑对话框#}div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabel新建/h4/divdiv classmodal-bodyform idformSavediv classclearfix{% for field in form %}div classcol-xs-6div classform-group,col-ms-2stylemargin-bottom: 20px ;position:relative;{# div classform-control#}label{{ field.label }}/label{{ field }}span classerror-msg stylecolor: red;position: absolute/span/div/div{% endfor %}/div/form/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取 消/buttonbutton idbtnSave typebutton classbtn btn-primary保 存/button/div/div/div/div{#删除对话框#}div classmodal fade iddeleteModal tabindex-1 roledialog aria-labelledbydeleteModalLabeldiv classmodal-dialog roledocumentdiv classalert alert-danger alert-dismissible fade in rolealertbutton typebutton classclose data-dismissalert aria-labelClosespanaria-hiddentrue×/span/buttonh4是否删除/h4p stylemargin:10px 0px;确定删除后选取数据所有相关的数据都会被删除/pp styletext-align: right ;button idbtnConfirmDelete typebutton classbtn btn-danger确 定/buttonbutton typebutton classbtn btn-default data-dismissmodal取 消/button/p/div/div/div{#删除对话框#}{% endblock %}{% block js %}script typetext/javascriptvar DELETE_IDvar EDIT_ID$(function () {bindBtnAddEvent();bindBtnSaveEvent();bindBtnDeleteEvent();bindBtnConfirmDeleteEvent();bindBtnEditEvent();})function bindBtnAddEvent() {$(#btnAdd).click(function () {{#将正在编辑的ID设置为空#}EDIT_ID undefined;{#清空对话框中的数据#}$(#formSave)[0].reset();$(#myModalLabel).text(新建)$(#myModal).modal(show)});}function bindBtnSaveEvent() {$(#btnSave).click(function () {{#清除错误信息#}$(.error-msg).empty();if (EDIT_ID) {//编辑doEdit();} else {//添加doAdd();}function doEdit() {$.ajax({url: /order/edit/ ?uid EDIT_ID,type: post,data: $(#formSave).serialize(),dataType: JSON,success: function (res) {if (res.status) {alert(添加成功);{##清空表单#}$(#formSave)[0].reset();{#关闭对话框#}$(#myModal).modal(hide){#添加自动刷新#}location.reload();} else {if (res.tips) {alert(res.tips);} else {$.each(res.error, function (name, errorlist) {{#console.log(name, errorlist)#}$(#id_ name).next().text(errorlist[0]);})}}}})}function doAdd() {$.ajax({url: /order/add/,type: post,data: $(#formSave).serialize(),dataType: JSON,success: function (res) {if (res.status) {alert(添加成功);{##清空表单#}$(#formSave)[0].reset();{#关闭对话框#}$(#myModal).modal(hide){#添加自动刷新#}location.reload();} else {{#console.log(res.error);#}$.each(res.error, function (name, errorlist) {{#console.log(name, errorlist)#}$(#id_ name).next().text(errorlist[0]);})}}})}{#向后台发送请求添加ajax请求#}})}function bindBtnDeleteEvent() {$(.btn-delete).click(function () {{#alert(点击了删除);#}$(#deleteModal).modal(show);{# 获取当前行的ID并赋值给全局变量 #}DELETE_ID $(this).attr(uid);})}function bindBtnConfirmDeleteEvent() {$(#btnConfirmDelete).click(function () {{# 确认删除按钮将确定删除的id发送给后台#}$.ajax({url: /order/delete/,type: GET,data: {uid: DELETE_ID},dataType: JSON,success: function (res) {if (res.status) {{#alert(删除成功);#}{#$(#deleteModal).modal(hide);#}{#location.reload();#}{# 在页面上将当前一行数据删除#}{#$(tr[uidDELETE_ID ]).remove();#}{# 要删除的id置为空#}{#DELETE_ID 0;#}location.reload();} else {alert(res.error);}}})})}function bindBtnEditEvent() {$(.btn-edit).click(function () {var uid $(this).attr(uid);EDIT_ID uid{#设置对话框标题#}$(#myModalLabel).text(编辑){#alert(点击了编辑);#}{# 发送ajax去后端获取当前行的相关数据#}$.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);})$(#myModal).modal(show);} else {alert(res.error)}}}){# 在对话框中默认看到#}})}/script
{% endblock %}注意 订单号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”]
{% extends layout.html %}{% block content %}div classcontainerdiv{# input typebutton value新建订单1 classbtn btn-primary data-togglemodal data-target#myModal#}input idbtnAdd typebutton value新建订单2 classbtn btn-success/divdiv classpanel panel-default stylemargin-top: 20px;!-- Default panel contents --div classpanel-headingdivspan classglyphicon glyphicon-th-list aria-hiddentrue 订单列表 /span/div/div!-- Table --table classtabletheadtrthid/thth订单号/thth名称/thth价格/thth状态/thth负责人/thth操作/th/tr/theadtbody{% for obj in queryset %}trth{{ obj.id }}/thtd{{ obj.oid }}/tdtd{{ obj.title }}/tdtd{{ obj.price }}/tdtd{{ obj.get_status_display }}/tdtd{{ obj.admin.username }}/tdtdinput uid{{ obj.id }} typebutton classbtn btn-primary btn-xs btn-edit value编 辑input uid{{ obj.id }} classbtn btn-danger btn-xs btn-delete typebuttonvalue删 除/td/tr{% endfor %}/tbody/table/divul classpagination{{ page_string }}/ul/div{#新建/编辑对话框#}div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabel新建/h4/divdiv classmodal-bodyform idformSavediv classclearfix{% for field in form %}div classcol-xs-6div classform-group,col-ms-2stylemargin-bottom: 20px ;position:relative;{# div classform-control#}label{{ field.label }}/label{{ field }}span classerror-msg stylecolor: red;position: absolute/span/div/div{% endfor %}/div/form/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取 消/buttonbutton idbtnSave typebutton classbtn btn-primary保 存/button/div/div/div/div{#删除对话框#}div classmodal fade iddeleteModal tabindex-1 roledialog aria-labelledbydeleteModalLabeldiv classmodal-dialog roledocumentdiv classalert alert-danger alert-dismissible fade in rolealertbutton typebutton classclose data-dismissalert aria-labelClosespanaria-hiddentrue×/span/buttonh4是否删除/h4p stylemargin:10px 0px;确定删除后选取数据所有相关的数据都会被删除/pp styletext-align: right ;button idbtnConfirmDelete typebutton classbtn btn-danger确 定/buttonbutton typebutton classbtn btn-default data-dismissmodal取 消/button/p/div/div/div{#删除对话框#}{% endblock %}{% block js %}script typetext/javascriptvar DELETE_IDvar EDIT_ID$(function () {bindBtnAddEvent();bindBtnSaveEvent();bindBtnDeleteEvent();bindBtnConfirmDeleteEvent();bindBtnEditEvent();})function bindBtnAddEvent() {$(#btnAdd).click(function () {{#将正在编辑的ID设置为空#}EDIT_ID undefined;{#清空对话框中的数据#}$(#formSave)[0].reset();$(#myModalLabel).text(新建)$(#myModal).modal(show)});}function bindBtnSaveEvent() {$(#btnSave).click(function () {{#清除错误信息#}$(.error-msg).empty();if (EDIT_ID) {//编辑doEdit();} else {//添加doAdd();}function doEdit() {$.ajax({url: /order/edit/ ?uid EDIT_ID,type: post,data: $(#formSave).serialize(),dataType: JSON,success: function (res) {if (res.status) {alert(添加成功);{##清空表单#}$(#formSave)[0].reset();{#关闭对话框#}$(#myModal).modal(hide){#添加自动刷新#}location.reload();} else {if (res.tips) {alert(res.tips);} else {$.each(res.error, function (name, errorlist) {{#console.log(name, errorlist)#}$(#id_ name).next().text(errorlist[0]);})}}}})}function doAdd() {$.ajax({url: /order/add/,type: post,data: $(#formSave).serialize(),dataType: JSON,success: function (res) {if (res.status) {alert(添加成功);{##清空表单#}$(#formSave)[0].reset();{#关闭对话框#}$(#myModal).modal(hide){#添加自动刷新#}location.reload();} else {{#console.log(res.error);#}$.each(res.error, function (name, errorlist) {{#console.log(name, errorlist)#}$(#id_ name).next().text(errorlist[0]);})}}})}{#向后台发送请求添加ajax请求#}})}function bindBtnDeleteEvent() {$(.btn-delete).click(function () {{#alert(点击了删除);#}$(#deleteModal).modal(show);{# 获取当前行的ID并赋值给全局变量 #}DELETE_ID $(this).attr(uid);})}function bindBtnConfirmDeleteEvent() {$(#btnConfirmDelete).click(function () {{# 确认删除按钮将确定删除的id发送给后台#}$.ajax({url: /order/delete/,type: GET,data: {uid: DELETE_ID},dataType: JSON,success: function (res) {if (res.status) {{#alert(删除成功);#}{#$(#deleteModal).modal(hide);#}{#location.reload();#}{# 在页面上将当前一行数据删除#}{#$(tr[uidDELETE_ID ]).remove();#}{# 要删除的id置为空#}{#DELETE_ID 0;#}location.reload();} else {alert(res.error);}}})})}function bindBtnEditEvent() {$(.btn-edit).click(function () {var uid $(this).attr(uid);EDIT_ID uid{#设置对话框标题#}$(#myModalLabel).text(编辑){#alert(点击了编辑);#}{# 发送ajax去后端获取当前行的相关数据#}$.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);})$(#myModal).modal(show);} else {alert(res.error)}}}){# 在对话框中默认看到#}})}/script
{% endblock %}
