ajax
小知识: MTV与MVC模型
django自己说自己是MTV框架,但是其实还是MVC框架
MTV:M(models), T(templates), V(views)
MVC:M(models), V(views), C(contronner(路由匹配))
aggregate
annotate
ajax(重要):
-
异步提交:
-
同步异步
- 同步: 在提交任务过后 就原地不动 等待返回结果后再继续执行 期间不做任何事情
- 异步: 在提交完任务后 不会原地等待结果 而是去做其他的事情 任务的返回通过回调机制
-
阻塞非阻塞
- 程序运行的状态, 运行,就绪,阻塞
-
-
局部刷新
- 一个页面 不是整体刷新 而是也免得某个地方局部刷新
ajax是一门js的技术, 基于原生js开发的, 但是原生的js写代码过于频繁,我们在学习的时候,是学习jQuery实现ajax
ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.
使用ajax写一个加法功能 - ajax传json格式
这个就是传递json格式,传递普通格式在前端页面的最下面已经表述了.
1. 前端页面
<body>
<input type="text" id="t1">+
<input type="text" id="t2">=
<input type="text" id="sum1">
<button id="b1">计算</button>
<script>
$("#b1").on('click', function () {
$.ajax({ # 通过这个方式传递
url: '',
type: 'post',
data: JSON.stringify({'s1': $("#t1").val(), 's2': $("#t2").val()}), # 参数
contentType:'application/json', # 标识json格式
success: function (data) {
$("#sum1").val(data) # data是返回结果
}
})
})
</script>
</body>
# 直接传递参数,不在web端序列化成json格式,并且不指定contentType,就可以会被存放到POST里面
1. views.py
def index(request, ):
if request.is_ajax():
if request.method == 'POST':
s = request.body # 先接收body,json数据都在这里面
json_data = json.loads(s) # 对拿到的json反序列化
s1 = json_data.get('s1')
s2 = json_data.get('s2')
sum = int(s1) + int(s2)
return HttpResponse(sum) # 之间返回处理后的字符,也就是前端的data
return render(request, 'index.html')
ajax传文件
需要利用内置对象 Formdate
1. 前端页面
<body>
<input id="t1" type="text">
<input id="t2" type="text">
<input id="f1" type="file"> # 放文件的类型
<button id="b1">提交</button>
<script>
$("#b1").on('click', function () {
var myForMyDate = new FormData(); # 定义一个对象
myForMyDate.append('t1', $("#t1").val()); # 传值
myForMyDate.append('t2', $("#t2").val()); # 传值
myForMyDate.append('myFiles', $("#f1")[0].files[0]); # 传文件
$.ajax({ # 固定格式
url: '',
type: 'post',
data: myForMyDate, # 直接把对象传过去
contentType: false, # 指定不用任何编码
processData: false, # 指定不处理数据,直接发
success: function (data) {
alert(data)
}
})
})
</script>
</body>
# myForMyDate.append('myFiles', $("#f1")[0].files[0]):
获取input获取用户上传文件的内容
1. 先通过jquery查找到该标签->$("#f1")
2. 将jquery对象转换成原生的js对象->$("#f1")[0]
jq对象和js对象的关系:jq对象就相当于一个列表包裹着js对象,
所以用索引0就可以取到js对象
3. 利用原生js对象的方法,直接获取文件的内容->.files
拿到后他可能有多个,所以我们这里索引0一个
1. views.py
def up(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
obj = request.FILES.get('myFiles') # 获取文件
with open('my_text', 'wb') as fw: # 保存文件
for line in obj.chunks(): # chunks()类似于read()
fw.write(line)
return HttpResponse('已提交') # 返回结果
return render(request, 'up.html')
ajax传递文件的注意事项:
①. 利用FormDate对象 能够简单的快速传输数据(普通的键值+文件),通过appned方法.
②. 有几个必须有的参数
data: FormDate对象
contentType: false
processDate: false
contentType前后端传输数据编码格式
①. form表单 默认的提交数据的编码格式是url-encoded:
username=admin&password=123 这种格式就符合url-encoded数据格式
django后端会针对上面的这种数据进行自动解析,打包给POST,我们只需要从POST获取对应的信息
②. formdata:
django后端也会进行针对formdata格式类型数据也会自动解析,但是放的位置不再是POST,而是request.Files中
总结: django后端针对不同的数据编码格式的数据, 具有不同的处理机制,以及不同的获取数据的方法,把处理好的数据放在不同的地方
注意: ajax默认的提交数据的编码格式也是url-encoded
亲后端在做数据交互的时候,一定要表名所发的数据是什么格式.一定一定!
序列化组件
前后端分离的话,我们也要传递给前端一个json的大字典
导包: from django.core import serializers
1. views.py
def ser(request):
obj_lis = models.User.objects.all() # 查询出来所有的数据
json_data = serializers.serialize('json', obj_lis) # 导包成json格式,列表字典
print(json_data, type(json_data))
if request.is_ajax():
if request.method == 'POST':
sure = request.POST.get('sure')
if sure == 'yes': # 上面的代码都是按钮确认
return JsonResponse(json_data, safe=False) # 通过这个方法传递过去json格式的字符串,也可以使用json.loads,变为json对象传递过去
return render(request, 'ser.html')
ajax+sweetalert实现删除弹框确认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'sweetalert/dist/sweetalert.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'sweetalert/dist/sweetalert.css' %}">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>这个还有吗</h1>
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>名字</th>
<th>年龄</th>
<th>学历</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in user_obj %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.age }}</td>
<td>{{ obj.get_education_display }}</td>
<td>
<a href="#" class="b1" dis="{{ obj.pk }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
$('.b1').on('click', function () {
var $btn = $(this)
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false,
showLoaderOnConfirm: true
},
function (isConfirm) {
if (isConfirm) {
$.ajax({
url: '',
type: 'post',
data: {'del_id': $btn.attr('dis')},
success: function (data) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
$btn.parent().parent().remove()
}
})
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
})
</script>
</body>
</html>
1. views.py
def ajax(request):
back_dic = {'state': 1000, 'msg': '已删除'}
user_obj = models.User.objects.all()
if request.is_ajax():
if request.method == 'POST':
sure = request.POST.get('sure')
del_id = request.POST.get('del_id')
s = models.User.objects.filter(pk=int(del_id)).delete()
if s[0] == 0:
back_dic['state'] = 1001
back_dic['msg'] = '已经删除过了'
return JsonResponse(back_dic)
time.sleep(3)
return JsonResponse(back_dic)
return render(request, 'ajax_sweet.html', locals())