[Django之框架设计模型(MTV与MVC)、Ajax]
2021-05-27 23:05
931 查看
[Django之框架设计模型(MTV与MVC)、Ajax]
框架设计模型(MTV与MVC)
MTV M:models模型层 T:templates模板层 V:views视图层 MVC M:models模型层 V:views视图层 C:controller控制层 django框架自称是MTV 其实本质也是MVC
Ajax
Django与ajax(入门)
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步JavaScript和XML”。是指一种创建交互式,快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,这意味着在不重新加载整个网页页面的情况下,对网页的部分内容进行更新
AJAX是一种用于快速动态网页的技术
传统的网页(不使用AJAX)如果需要更新内容,必须重新加载整个页面,而前面谈到AJAX是什么,其主要就是异步提交,那我们来聊聊同步和异步提交的区别
同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,客户才可以使用网页
异步提交:当用户发送请求时,当前页面可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来
AJAX的工作原理:
相当于在用户和服务器之间加了一个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给ajax引擎自己来做,只有确定需要从服务器读取数据时再由AJAX引擎代为向服务器提交请求
客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:
Ajax基本语法:
$.ajax({ url:'', // 控制提交地址 规律与form标签的action参数一致 type:'post', // 控制请求方式 data:{'i1':i1Val,'i2':i2Val}, // 发送的数据 dataType:JSON, //自动反序列化 success:function (args) { // 异步回调函数 {#alert(args)#} // 查看input框并且写入数据 $('#i3').val(args) } })
写ajax跟后端交互
1 使用原生js写ajax请求(没有人用) 第一:麻烦 第二:区分浏览器,需要做浏览器兼容 2 现在主流做法(现成有人封装好了,jquery,axios..) 以jquery为例
通过Ajax,实现前端输入两个数字,服务器做加法,返回到前端页面
视图函数views.py
def ajax_test(request): return render(request,'ajax_test.html') def sum(request): import time time.sleep(2) # 先转成整型再加 a1=int(request.GET.get('a1')) a2=int(request.GET.get('a2')) return HttpResponse(a1+a2)
路由urls.py
urlpatterns = [ url(r'^ajax_test/',views.ajax_test), url(r'^sum/',views.sum), ]
ajax_test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {% load static %} <script src="{% static 'JQuery3.6.0.js' %}"></script> </head> <body> <input type="text" id="a1"> + <input type="text" id="a2">=<input type="text" id="sum"> <button id="btn_submit">计算</button> </body> <script> $('#btn_submit').click(function () { var a1 = $('#a1').val() var a2 = $('#a2').val() // 发送ajax请求,计算,返回结果 $.ajax({ url: '/sum/', //ajax请求的地址 method: 'get',//请求方式 data: {'a1': a1, 'a2': a2}, //携带参数 success: function (data) { //服务端成功返回会回调,执行匿名函数 console.log(data) $('#sum').val(data) } }) }) </script> </html>
注意:
1 大坑 如果在form表单中,写button和input是submit类型,会触发form表单的提交 如果不想触发: 不写在form表单中 使用input,类型是button 2 坑 后端响应格式如果是:html/text格式,ajax接收到数据后需要自己转成对象 后端响应格式是:json,ajax接收到数据后会自动转成对象 总结:后端返回数据,统一都用JsonResponse、 3 坑 如果使用了ajax,后端就不要返回rediret,render,HttpResponse 直接返回JsonResponse
上传文件(ajax和form两种方式)
1 http --post--请求,有编码格式,主流有三种 urlencoded :默认的----》从request.POST取提交的数据 form-data :上传文件的----》从request.POST取提交的数据,request.FILES中取文件 json :ajax发送json格式数据-----》request.POST取不出数据了 2 使用ajax和form表单,默认都是urlencoded格式 3 如果上传文件:form表单指定格式,ajax要使用Formdata对象 4 如果编码方式是urlencoded格式,放到body体中数据格式如下 username=lqz&password=123 5 如果是formdata编码格式,body体中是:两部分,数据和文件 6 如果是json格式,body体中的格式是:就是json格式字符串 -注意:注意:注意:如果这种格式,request.POST取不到值了 ------------------------------------------------------------------------------------ 总结下来就是: form传输过来的数据,如果是默认的urlencoded编码格式,那么只要满足此格式,都会封装到POST中! form传输过来的数据,如果改成了form-data的编码格式,那么满足此格式的(也就是文件)放在FILES中,其他满足urlencoded编码格式的放在POST,都不满足的放在body中!!!
form表单上传文件
urlpatterns = [ url(r'^file_upload/', views.file_upload), ]
def file_upload(request): if request.method == 'GET': return render(request,'file_upload.html') else: name = request.POST.get('name') myfile = request.FILES.get('myfile') # 拿到文件 print(type(myfile)) # 查看类型 with open(myfile.name, 'wb') as f: for line in myfile: f.write(line) return HttpResponse('上传成功')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>form表单上传文件</h1> <form action="" method="post" enctype="multipart/form-data"> <p>用户名:<input type="text" name="name"></p> <p>文件:<input type="file" name="myfile"></p> <input type="submit" value="提交"> </form> </body> </html>
ajax 上传文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>ajax上传文件</h1> <p>用户名:<input type="text" id="id_name"></p> <p>文件:<input type="file" id="id_myfile"></p> <button id="id_btn">提交</button> </body> <script> # ajax发送文件数据 $('#d1').on('click',function () { // 1.先生成一个内置对象 let formDataObj = new FormData(); // 2.添加符合urlencoded格式的普通键值对数据 formDataObj.append('name','jason'); formDataObj.append('password',123); // 3.添加文件数据 formDataObj.append('myfile',$('#myfile')[0].files[0]); // ajax发送给后端 $.ajax({ url:'', // 控制提交地址 规律与form标签的action参数一致 type:'post', // 控制请求方式 data:formDataObj, // 发送的数据 // 额外指定两个参数 contentType:false, // 不采用任何编码 后端能够直接识别formdata对象 processData:false, // 不处理formdata对象 直接发送即可 success:function (args) { } }) }); </script> </html>
ajax上传json格式
url.py
# url.py urlpatterns = [ url(r'^ajax_json/', views.ajax_json), ]
views.py
# views.py def ajax_json(request): import json if request.method == 'GET': return render(request,'ajax_json.html') else: # json格式,从POST中取不出来 name = request.POST.get('name') print(type(request.POST)) # 实际上不是一个真正的字典格式 # from django.http.request import QueryDict print(name) # 在body体中,b格式 request.data = json.loads(request.body) name = request.data.get('name') # 拿到用户名 password = request.data.get('password') # 拿到密码 print(name) print(password) return HttpResponse('ok')
ajax_json.html
# ajax_json.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>ajax提交json格式</h1> <p>用户名: <input type="text" id="id_name"></p> <p>密码: <input type="password" id="id_password"></p> <button id="id_button">提交</button> </body> <script> $('#id_button').click(function () { $.ajax({ url: '/ajax_json/', # 和from表单中的 action一毛一样 method: 'post', contentType: 'application/json', //json格式需指定编码格式 // 放json格式字符串 data: JSON.stringify({name:$('#id_name').val(),password:$('#id_password').val()}), success: function (data) { console.log(data) } }) }) </script> </html>
form表单默认是urlencoded编码格式
数据格式username=jason&password=234 django后端针对符合urlencoded格式的数据会自动解析并封装到request.POST中 django后端针对form-data格式的数据文件自动封装到request.FILES中 普通的符合urlencoded还是封装到request.POST中 # ajax默认是urlencoded编码格式 1.ajax发送json格式数据 django后端不做任何处理 直接以二进制形式存放在request.body中 data contentType
django内置序列化模块
Django内置的serializers(把对象序列化成json字符串)
把对象转成json格式字符串,返回给前端,django内置的不好用,字段不能控制
目前阶段,要做序列化,for循环拼列表套字典
from django.core import serializers
urlpatterns = [ url(r'^test/', views.test), ]
def test(request): user_list = models.User.objects.all() ret = serializers.serialize("json", user_list) return HttpResponse(ret)
class User(models.Model): name=models.CharField(max_length=32) password=models.CharField(max_length=32)
基于ajax实现二次确认
<script> $('.del_link').on('click',function (a) { var $aEle = $(this); var deleteId = $(this).attr('delete_id'); // 提示二次确认 res = confirm('你确定真的要删吗?'); // 判断是否删除 if (res){ // 发送ajax请求 $.ajax({ url:"/book_delete/" + deleteId, type:'get', data:{}, success:function (args) { // 1.页面刷新 不推荐使用 window.location.reload(); // 2.DOM操作 正规 用户体验好 $aEle.parent().parent().remove() } }) }else{ alert('怂逼不敢删啦') } }) </script>
相关文章推荐
- Django与AJAX-choice字段-MTV和MVC模型-sweetalert搭建页面
- [Django系统课程学习笔记]p1 MVC/MTV框架和Django简介
- Django框架里的MVC思想MVC 设计模式
- web框架---Django之MTV模型
- 基于MVC的web框架---模型层设计
- Django框架:设计模型
- Django2_MVC(MTV)模型、常用简单命令、项目目录文件说明及static静态文件
- Django框架MTV架构之 Models(模型)
- [ASP设计]用MVC模型引导你的WEB设计思路-第二版
- 三层框架(EF+MVC)项目实战之 系列一 EF零基础创建领域模型
- 深入浅出Java三大框架SSH与MVC的设计模式
- 【Android】【设计】Android 框架 MVC,MVP,MVVM
- J2EE项目系列(四)--SSM框架构建积分系统和基本商品检索系统(Spring+SpringMVC+MyBatis)(3)Ajax使用详解(级联列表)以及企业级报表Excel导入导出实现
- 架构(三层架构)、框架(MVC)、设计模式三者异同点
- MVC设计模型的功能介绍及优缺点分析
- python django框架ajax异步交互时(判断账号或昵称唯一)阻止form表单提交简便方式
- 用 JAX-RS 和 JSR 371 规范设计一个 MVC 框架(一)开篇
- javaBean(mvc设计模型中的model)
- [转]用MVC模型引导你的WEB设计思路
- 用MVC模型引导你的WEB设计思路