Ajax
什么是Ajax?
简介:
Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
作用:
能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
强调:
Ajax是异步提交,局部刷新
复习知识:
什么是异步?
异步操作就是,当程序遇到IO时,不原地等待,会去另一个程序执行
基础语法
$.ajax({
url:'控制数据提交的地址',
type:'提交的方式',
data:{'提交的数据'},
success:function (形参) {
异步回调函数
}
})
数据编码格式
参数名:Content_Type
三种参数值(三种格式):
-
urlencoded
数据格式eg:name=‘jason’&age=18
django后端统一处理到request.POST中 -
formdata
数据格式:无法查询
django后端自动将文件数据处理到request.FILES中 -
application/json
数据格式:json格式
django后端不会处理,在request.body中存储(bytes类型),需要自己处理语法注意事项
data:Json.Stringify({'name': jason, 'age': 18}) Json.Stringify:是JS中序列化方式 contentType:'application/json'
Ajax携带文件数据
ajax传文件需要注意的事项
-
利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)
生成一个formdata对象:
var FormData = new FormData()
-
有几个参数
data:formdata对象 # 传输对象 contentType:false # 不用任何编码 因为formdata对象自带编码 django能够识别该对象 processData:false # 告诉浏览器不要处理我的数据 直接发就行
-
需要利用内置对象:FormData
该对象既可以传普通的键值 也可以传文件 -
获取input框用户上传的文件的内容
1.先通过jquery查找到该标签
2.将jquery对象转换成原生的js对象
3.利用原生js对象的方法 直接获取文件内容
eg: $(‘#t3’)[0].files[0]
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p><input type="text" id="i2"></p>
<p><input type="file" id="i1"></p>
<button id="sub">提交</button>
</body>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
$('#sub').click(function () {
let formdata = new FormData();
formdata.append('username', $('#i2').val())
formdata.append('file', $('#i1')[0].files[0])
$.ajax({
url: '',
type: 'post',
data: formdata,
contentType:false,
processData: false,
success: function (args) {
}
})
})
</script>
</html>
后端代码:
def ajax(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request, 'ajax.html')
回调函数
redirect是没有办法跳转字符串形式的网址的
后端与ajax做交互的时候,只是把值传给了前端中的args,而不会影响整个页面
如果你想就这样实现通过重定向跳转页面,那么你可以将网址传给后端的args,然后让前端帮你实现
后端通过HttpResponse传输json.dumps序列化后的数据到前端是,是先基于HTTP协议转换成二进制模式,前端可能会自动帮我们解码处理
后端跟ajax交互 不应该再返回页面 通常情况下都是返回json格式数据
前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同
HttpResponse不会自动反序列化 而JsonResponse会自动反序列化
如果想让前者也自动反序列化可以添加一个固定的参数
dataType:'JSON'
序列化
可以根据自己想要的方式序列化数据
导入模块:from django.core import serializers
格式:
def ser(request):
#拿到用户表里面的所有的用户对象
user_list=models.User.objects.all()
#导入内置序列化模块
from django.core import serializers
#调用该模块下的方法,第一个参数是你想以什么样的方式序列化你的数据
ret=serializers.serialize('json',user_list)
return HttpResponse(ret)