Ajax

一. 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 是返回的响应,根据响应搞事情
}
})

基于jQuery的实现

四. 用json处理python和JavaScript的消息

　　1. 使用json模块处理

import json

data = json.dumps(data)    # 序列化

return HttpResponse(data)

py端

data = JSON.parse(data)    # js中的反序列化

JavaScript端　

　　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])

第三种JsonResponse模块

五. 请求头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

django内置方法获取文件

　　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>

ajax上传文件

　　　　views中还是使用那两个方法接收文件

七. ajax请求,设置csrf_token

　　1. 通过获取标签内的csrfmiddlewaretoken来获取值,然后放在data中发送

　　2. 通过cookie获取csrf放在ajax发headers头中发送

$.ajax({
    headers:{
    "X-CSRFToken":$.cookie("csrftoken"),
}
})

cookie发送csrf