【Django】第07回 Ajax、序列化
目录
1. Ajax
1.1 Ajax简介
1. AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
2. AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3. AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
4. AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
1.2 异步提交 局部刷新
1. 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
2. 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
异步提交: 提交完认为不需要原地等待，立马就做其他事
局部刷新: 不在局限于整个页面的刷新，而是在于局部的某一个页面的小块刷新
1.3 Ajax工作原理
1. 创建 Ajax 核心对象（XMLHttpRequest）
2. 通过 Ajax 核心对象的 open() 方法建立与服务端的链接
3. 构建请求的数据内容，通过核心对象的 send() 方法发送给服务端
4. 通过核心对象提供的 onreadystatechange 事件，监听服务端的通信状态
5. 接受处理服务端响应的结果
6.将结果更新到页面
1.4 Ajax 优缺点
优点
1. 无刷新更新数据
Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
2. 异步与服务器通信
AJAX使用JavaScript技术向服务器发送异步请求
3. 前端与后端负载均衡
将一些后端的工作移到前端，减少服务器与带宽的负担
4. 基于规范被广泛支持
不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
5. 界面与应用分离
Ajax使得界面与应用分离，也就是数据与呈现分离
缺点
1. Ajax干掉了Back与History功能，即对浏览器机制的破坏
2. 对搜索引擎支持较弱
3. 安全问题。Ajax技术就如同对企业数据建立了一个直接通道不经意间会暴露比以前更多的数据和服务器逻辑。
4. 破坏程序的异常处理机制
5. 违背URL与资源定位的初衷
6. 不能很好地支持移动设备
1.5 Ajax 基础语法
$.ajax({
url:'', 控制数据的提交地址
type:'', 控制请求方式(默认get请求)
data:{}, 组织提交的数据
success:function(形参){
异步回调函数
}
})
1. $.ajax为固定用法，表示启用ajax
2. url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
3. type为标定你这个ajax请求的方法
4. data后面跟的就是你提交给后端的数据
5. success为回调函数，参数data即后端给你返回的数据
1.6 数据编码格式
格式1：application/x-www-form-urlencoded
1. 数据格式: name=jason&pwd=123&hobby=read
2. 请求头中的Content-Type默认值为content-type:application/x-www-form-urlencoded，不指定content-type时，默认使用此格式。
3. django后端统一处理到request.POST中
格式2：multipart/form-data
1. 数据格式: 无法查阅
2. django后端自动将文件数据处理到request.FILES 普通数据request.POST
3. application/x-www-form-urlencoded是把数据使用url编码后传送给后端，不适合用于传输大型二进制数据或者包含非ASCII字符的数据，multipart/form-data就诞生了，专门用于有效的传输文件。
4. multipart/form-data 既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。
5. 使用multipart/form-data时，请求体参数可来自于new FormData()生成的实例，或enctype为multipart/form-data的表单数据。
格式3：content-type:application/json
1. 数据格式: json格式
2. django后端不会处理 在request.body中存储(bytes类型) 自己处理
3. 语法注意事项
data: JSON.stringify({'name':'jason','pwd':123}),
contentType:'application/json',
4. application/json能够方便传递复杂多层次对象，消息主体是序列化的JSON字符串。
1.7 计算整数
html
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<input type="button" value="计算" id="subBtn">
<script>
$('#subBtn').click(function (){
// 朝后端发送数据 使用ajax
$.ajax({
url:'', // 等价于form表单的action参数
type:'post', // 等价于form表单的method参数
data:{'i1':$('#d1').val(),'i2':$('#d2').val()}, //要发送给后端的数据
success:function (args){ // 形参args就是用于接收后端返回的数据
$('#d3').val(args)
{#alert('后端接收到了数据，并且给出了一定的反馈')#}
}
})
})
</script>
</body>
views
def ab_ajax(request):
if request.method == 'POST':
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
res = int(i1) + int(i2)
return HttpResponse(res)
return render(request, 'abAjax.html')
1.8 ajax发送json格式数据
def ab_ajax(request):
if request.is_ajax(): # is_ajax 判断是否是ajax
if request.method == 'POST':
print(request.POST) # <QueryDict: {}>
print(request.FILES) # <MultiValueDict: {}>
print(request.body) # b'{"name":"jaosn","pwd":123}'
return render(request, 'abAjax.html')
<button id="d1">点我</button>
<script>
$('#d1').click(function (){
$.ajax({
url:'',
type:'post',
data: JSON.stringify({'name':'jaosn','pwd':123}),
contentType:'application/json',
success:function (args){
}
})
})
</script>
print(request.body) # b'{"name":"jaosn","pwd":123}'
json_bytes = request.body
import json
json_dict = json.loads(json_bytes)
print(json_dict, type(json_dict))
1.9 ajax携带文件数据
<body>
<input type="text" id="d1">
<input type="file" id="d2">
<button id="d3">点我</button>
<script>
$('#d3').click(function () {
// 1.产生内置对象
let formData = new FormData();
// 2.添加普通数据
formData.append('username',$('#d1').val())
// 3.添加文件数据
formData.append('file', $('#d2')[0].files[0])
// 4.发送ajax请求
$.ajax({
url:'',
type:'post',
data:formData,
contentType:false, // 不使用任何编码
processData:false, // 不处理数据对象
success:function (args) {
}
})
})
</script>
</body>
1.10 回调函数
后端跟ajax交互 不应该再返回页面 通常情况下都是返回json格式数据
前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同
前者不会自动反序列化 而后者会自动反序列化
如果想让前者也自动反序列化可以添加一个固定的参数
dataType:'JSON'
2. 序列化
def ser(request):
#拿到用户表里面的所有的用户对象
user_list=models.User.objects.all()
#导入内置序列化模块
from django.core import serializers
#调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
ret=serializers.serialize('json',user_list)
return HttpResponse(ret)
3. sweetalert
https://sweetalert.js.org/guides/
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
