一. Ajax是什么
Asynchronous JavaScript And XML 异步JavaScript和XML
Ajax是使用JavaScript语言与服务器进行异步交互,传输数据为XML(现在更多的是用json)
二. Ajax的优点
1. 局部刷新页面
2. 和服务器进行异步交互
3. 局部刷新性能高
三. Ajax的使用
1. 基于jQuery实现
一般和绑定事件一起用 $.ajax({ url: "{% url "别名"%}", # 提交路径 type: "post", # 提交方式,post,get... data{ "k1":v1,"k2":v2... }, # 提交的数据,自定义对象类型 success:function(response){ response 是返回的响应,根据响应搞事情 } })
四. 用json处理python和JavaScript的消息
1. 使用json模块处理
import json data = json.dumps(data) # 序列化 return HttpResponse(data)
data = JSON.parse(data) # js中的反序列化
2. 发送一个ajax标识头,Ajax自动识别消息
def login(request): data = json.dumps(data) # content_type 是个标识头,ajax看见会自动处理 return HttpResponse(data,content_type="application/json")
3. 使用django带的JsonResponse模块
这个模块帮你处理消息格式
from django.http import JsonResponse def login(request): # 如果发送字典格式外的,需要在后面加safe=False return JsonResponse(data ,[safe=False])
五. 请求头contenttype/enctype
1. application/x-www-form-urlencoded
常见的post提交方式,ajax和form都默认使用这个方式提交数据
2. multipart/form-data
常见的post提交方式,用于提交文件
3. application/json
提交json格式的数据,django没有处理json的方法,需要自己处理
六. 上传文件
1. 基于form表单的上传
html中
form标签中需要一个enctype属性 enctype="multipart/form-data"(这个是把大数据文件一段一段隔开),还需要一个{% csrf_token %}
views中
file_obj = request.FILES.get("input标签的name") 拿到的是类似于文件句柄的对象
file_name = file_obj.name 获取上传的文件的文件名
with open("服务端存的路径","wb") as f: for line in file_obj: # 遍历 f.write(line)
with open("服务端存的路径","wb") as f: for chunk in file_obj.chunks(): f.write(chunk) # chunk()方法默认一次返回65536kb
2. 基于ajax上传文件
html中
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> 文件 <input type="file" id="file" name="file"> <button id="btn">提交</button> <span class="ret"></span> {% csrf_token %} <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script src="/static/jquery.cookie.js"></script> <script> $("#btn").click(function () { var file = $("input[type=file]")[0].files[0]; // [0]转换成document对象,获取文件内容 var formdata = new FormData(); // 创建一个formdata对象用来存储文件信息 var csrf = $("[name=csrfmiddlewaretoken]").val(); //获取csrf验证用来验证 formdata.append("file_obj",file); //添加信息到formdata对象 formdata.append("csrfmiddlewaretoken",csrf); $.ajax({ url: {% url "upload0" %}, type: "post", // contentType: "json"; data:formdata, processData: false, // 不处理数据 contentType: false, // 不设置内容类型 success:function (response) { if(response === "ok"){ $(".ret").text("ok") } } }) }) </script> </body> </html>
views中还是使用那两个方法接收文件
七. ajax请求,设置csrf_token
1. 通过获取标签内的csrfmiddlewaretoken来获取值,然后放在data中发送
2. 通过cookie获取csrf放在ajax发headers头中发送
$.ajax({
headers:{
"X-CSRFToken":$.cookie("csrftoken"),
}
})