MTV 与 MVC
MVC : Model View Controller 模型-视图-控制器
是一种Web架构的模式。特点:把业务逻辑、模型数据、用户界面分离开来,让开发者将数据与表现解耦。 Model: 代表数据存取层, View 代表的是系统中选择显示什么和怎么显示的部分, Controller 指的是系统中根据用户输入并视需要访问模型,以决定使用哪个视图的那部分。
MTV : Model Templates View 模型-模板-视图
1.Models:数据存取层。 该层处理与数据相关的所有事务: 如何存取、如何验证有效,是一个抽象层,用来构建和操作你的web应用中的数据,模型是你的数据的唯一的、权威的信息源。它包含你所储存数据的必要字段和行为。通常,每个模型对应数据库中唯一的一张表。 2.模板(templates):即表现层。 该层处理与表现相关的决定: 如何在页面或其他类型文档中进行显示。模板层提供了设计友好的语法来展示信息给用户。使用模板方法可以动态地生成HTML。模板包含所需HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。 3.视图(views):业务逻辑层,该层包含存取模型及调取恰当模板的相关逻辑。用于封装负责处理用户请求及返回响应的逻辑。视图可以看作是前端与数据库的中间人,他会将前端想要的数据从数据库中读出来给前端。他也会将用户要想保存的数据写到数据库。
区别 :
MVC中的View的目的是「呈现哪一个数据」,而MTV的View的目的是「数据如何呈现」。 也就是把MVC中的View分成了视图(展现哪些数据)和模板(如何展现)2个部分,而Contorller这个要素由框架自己来实现了,我们需要做的就是把(带正则表达式的)URL对应到视图就可以了,通过这样的URL配置,系统将一个请求发送到一个合适的视图。
AJAX(***重点***)
同步与异步
同步: 一个进程在执行某个请求时,如果该请求需要一段时间才能返回信息,那么,这个请求会卡在这,直到收到返回信息才继续执行下去 异步: 在上面那种情况下,该进程不需要一直等待下去,而是发出请求后继续执行自己的代码,当请求有信息返回时,通知该进程进行处理,然后通过回调函数拿到结果,可以大大提高程序的执行效率。 也就是说,异步是我们发出的一个请求,该请求会在后台自动发出并获取数据,然后对数据进行处理,在此过程中,我们可以继续做其他操作,不管它怎么发出请求,不关心它怎么处理数据。 总结: 以上总结起来,通俗地讲,也就是说,同步需要按部就班地走完一整个流程,完成一整个动作,打个比方:同步的时候,你在写程序,然后你妈妈叫你马上拖地,你就必须停止写程序然后拖地,没法同时进行。而异步则不需要按部就班,可以在等待那个动作的时候同时做别的动作,打个比方:你在写程序,然后你妈妈让你马上拖地,而这时你就贿赂你弟弟帮你拖地,于是结果同样是拖好地,你可以继续敲你的代码而不用管地是怎么拖的哈哈。 同步与异步适用的场景: 就算是ajax去局部请求数据,也不一定都是适合使用异步的,比如应用程序往下执行时以来从服务器请求的数据,那么必须等这个数据返回才行,这时必须使用同步。而发送邮件的时候,采用异步发送就可以了,因为不论花了多长时间,对方能收到就好。总结得来说,就是看需要的请求的数据是否是程序继续执行必须依赖的数据
阻塞与非阻塞

局部刷新
一个页面 不是整体刷新 而是页面的某个地方局部刷新
PS: AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX的使用
基本的ajax传递数据
1.展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求 页面不刷新的情况下 完成数字的加法运算 <input type="text" id="add1">+ <input type="text" id="add2">= <input type="text" id="res"> <a href="#" class="btn btn-primary" id="start">计算</a> <script> $('#start').on('click',function () { {#var myFormData = new FormData();#} {#myFormData.append('add1',$("#add1").val());#} {#myFormData.append('add2',$("#add2").val());#} $.ajax({ url:'', type:'post', data:{'add1':$('#add1').val(),'add2':$('#add2').val()}, success:function (data) { {#data是从后端获得的return值#} $('#res').val(data) } }) }) </script>
Ajax传json格式数据
# 前端 <script> var a = {'username':'a','password':'123'}; $.ajax({ url:'', type:'post', contentType:'application/json', data:JSON.stringify(a), success:function (data) { alert(data) }, }) </script> # 后端 if request.is_ajax(): res = json.loads(request.body) print(request.body, type(request.body)) # b'{"username":"a","password":"123"}' <class 'bytes'> return HttpResponse(request.body) 注意: 后端接收到的数据在request.body里,并且是bytes格式的字符串 PS: 1.指定contentType参数 contentType:'application/json', 2.要将你发送的数据 确保是json格式的 data:JSON.stringify({'username':'jason','password':'123'})
AJAX传文件
# 前端 <input type="file" name="" id="myfile1"> <input type="button" id="sub1" value="123"> <script> $('#sub1').on('click',function () { var myformdata = new FormData(); myformdata.append('username','lijian'); myformdata.append('password','123'); myformdata.append('myfile',$('#myfile1')[0].files[0]); console.log($('#myfile1')[0].files[0]); $.ajax({ url:'', type:'post', data:myformdata, contentType:false, processData:false, success:function (data) { alert(data); } }) }) </script> # 后端 def ajax_file(request): if request.is_ajax(): print(1,request.POST) # if request.body: # print(2,request.body) print(3,request.FILES) return HttpResponse(123) return render(request, 'ajax_file.html') # $('#myfile1')[0].files[0] 获取文件内容 1.先通过jquery对象查找到file标签 $('#file1') 2.将jquery对象转换成原生js对象 $('#file1')[0] 3.利用原生js对象的方法,直接获取文件内容 $('#myfile1')[0].files[0] 因为获取的文件内容可以是多个,所以取第一个 注意:如何传递文件 1.创建FormData对象 var myFormData = new FormData(); 2.为FormData对象添加键值 2.1普通键值 myFormData.append('username',普通字符串); 2.2文件 myFormData.append('myfile',$('#t3')[0].files[0]); ************ 3.ajax里的几个必要参数 data:myFormData contentType:false processData:false
contentType 前后端传输数据编码格式
form表单 默认的提交数据的编码格式是urlencoded urlencoded username=admin&password=123这种就是符合urlencoded数据格式 django后端针对username=admin&password=123的urlencoded数据格式会自动解析 将结果打包给request.POST 用户只需要从request.POST即可获取对应信息 formdata django后端针对formdata格式类型数据 也会自动解析 但是不会方法request.POST中而是给你放到了request.FILES中 ajax ajax默认的提交数据的编码格式也是urlencoded username=jason&password=123 总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法
序列化组建
1.将用户表的数据 查询出来 返回给前端 给前端的是一个大字典 字典里面的数据的一个个的字段 from django.core import serializers def ajax_load(request): user_list = [] user_queryset = models.User.objects.all() # 方式一 # 手动将对象的属性放入字典 for user_obj in user_queryset: user_list.append({ 'id':user_obj.pk, 'username':user_obj.username, 'gender':user_obj.gender, }) print(user_list[0],type(user_list[0])) # 方式二 # 利用serializers将queryset对象反序列化成json格式字符串,并将对象的所有属性封装成列表套字典的形式 # 因为这是一个字符串,所以要将它还原再给前端使用 res = serializers.serialize('json',user_queryset) res = eval(res) print(res, type(res)) # [{'model': 'user.user', 'pk': 1, 'fields': {'username': 'mark', 'gender': 1}}, {'model': 'user.user', 'pk': 2, 'fields': {'username': 'ja', 'gender': 2}}, {'model': 'user.user', 'pk': 3, 'fields': {'username': 'la', 'gender': 3}}] <class 'list'> print(res[0],type(res[0])) # {'model': 'user.user', 'pk': 1, 'fields': {'username': 'mark', 'gender': 1}} <class 'dict'> return render(request, 'ajax_load.html', locals())