关于异步——AJAX
MTV 与 MVC
MVC : Model View Controller 模型-视图-控制器
是一种Web架构的模式。特点：把业务逻辑、模型数据、用户界面分离开来，让开发者将数据与表现解耦。
Model： 代表数据存取层，
View 代表的是系统中选择显示什么和怎么显示的部分，
Controller 指的是系统中根据用户输入并视需要访问模型，以决定使用哪个视图的那部分。
MTV : Model Templates View 模型-模板-视图
１．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())
