Ajax、序列化
Ajax、序列化
Ajax
1、简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
Ajax其实就是利用浏览器提供一个特殊的对象异步地向服务器发送请求。服务器返回部分数据，浏览器让我们利用这些数据对象对页面做部分更新，整个过程页面不刷新，不会打断用户操作，会自动更新某些页面变化。
同步和异步的区别：
同步：客户端与服务端交互时，客户端不能镜像其它操作，只能等待服务器端的响应结束才能操作，且会刷新页面。
eg：form表单
异步：当客户端进行页面操作是，同时可以与服务端进行交互，服务器响应客户端信息，将信息更新到页面，且不会刷新页面。
eg：码云注册手机号输入框
'''
Ajax其实就是js自带的功能，不是一门新的技术点，我们学习的是jQuery封装之后的版本。
重点：异步提交，局部刷新
'''
2、基础语法
$.ajax({
url:'', // 等价于form标点的action参数，控制数据的提交地址
type:'', // 等价于form表单的method参数，控制请求方式，默认是get请求
data:{}, // 要发送给后端的数据
success:function (形参){ //形参args就是用于接收后端返回的结果
异步回调函数
}
})
eg：
<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就是用于接收后端返回的结果#}
{#alert(args)#}
{# $('#d3').val(args)#}
{# }#}
{# })#}
{# })#}
$('#d2').blur(function (){
$.ajax({
url:'', // 等价于form标点的action参数
type:'post', // 等价于form表单的method参数
data:{'i1':$('#d1').val(), 'i2':$('#d2').val()}, // 要发送给后端的数据
success:function (args){ //形参args就是用于接收后端返回的结果
{#alert(args)#}
$('#d3').val(args)
}
})
})
</script>
3、数据编码格式
Content-Type
格式1：urlencoded
数据格式：name = jason&pwd=123&hobby=read
django后端统一处理到request.POSt中
格式2：formddata
数据格式：无法查阅
django后端自动将文件数据处理到request.FILES
普通数据处理到request.POST
格式3：application/json
数据格式：JSON格式
django后端不会处理，在request.body中存储(bytes类型)，自己处理
语法注意事项：
data: JSON.stringify({'name':'jason','pwd':123}), # data data data 可别再错了
contentType:'application/json',
'''端接收前端传来的json数据时，django会将数据都放在request.body中，但是body中的数据是二进制数据，所以我们还需要使用json.loads将数据转换成python的基本数据类型。'''
abAjax,html
$('#d1').on('click',function (){
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'jason','pwd':123}), # 序列化
contentType:'application/json',
success:function (args){
}
})
})
views.py
def ab_ajax(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST) # <QueryDict: {}>
print(request.FILES) # <MultiValueDict: {}>
print(request.body) # b'{"name":"jason","pwd":123}'
json_bytes = request.body
import json
json_dict = json.loads(json_bytes)
print(json_dict, type(json_dict)) # {'name': 'jason', 'pwd': 123} <class 'dict'>
return render(request, 'abAjax.html')
4、Ajax携带文件数据
<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>
'''普通数据都在request.POST中，文件数据在request.FILSE中'''
5、回调函数
后端和Ajax交互，不应该返回页面，通常情况下返回JSON格式数据
前端针对HttpResponse和JsonResponse返回JSON格式数据处理策略不同：
前者不会自动反序列化，而后者会自动反序列化
如果想要前者也自动反序列化可添加一个固定的参数：dataType:'JSON'
return HttpResponse(json.dumps({'name':'jason','pwd':123}))
$.ajax({
url:'',
type:'post',
data:formData,
contentType:false, //不使用任何编码
processData: false, // 不处理数据对象
dataType:'JSON',
success:function (args){
alert(args)
console.log(typeof args)
console.log(args)
}
})
eg：返回页面：
return HttpResponse('https://www.baidu.com')
$.ajax({
url:'',
type:'post',
data:formData,
contentType:false, //不使用任何编码
processData: false, // 不处理数据对象
success:function (args){
alert(args)
window.location.href = args
}
})
序列化
def get_book(request):
book_query = models.Book.objects.all()
# 将数据构造成jason格式{'pk':1,'title':'书'}
# book_list = []
# for book_obj in book_query:
# temp_dict = {}
# temp_dict['pk'] = book_obj.pk
# temp_dict['title'] = book_obj.title
# temp_dict['price'] = book_obj.price
# book_list.append(temp_dict)
from django.core import serializers
# 调用该模块的方法，第一个参数是你想以什么样的方式序列化你的数据
ret = serializers.serialize('json',book_query)
return HttpResponse(ret)
浙公网安备 33010602011771号