ajax

ajax特性

• 异步请求
• 局部刷新
• 如果外部引入ajax无法使用模板语言

$.ajax({
  url: "/login/",
  // url: {% url 'login' %}    // 使用模板语言
  type: "POST",
  data: {
    "username": "usr",
    "password": "pwd",
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
    // "csrfmiddlewaretoken":"{{ csrf_token }}"    // 使用模板语言
  },
  success: function (msg) {        // msg为响应内容，根据响应内容再做其他操作
    console.log(msg);
  }
})

 

上传文件

---

form表单上传文件

• 需要设定enctype="multipart/form-data"

<form action="/upload/" method="post" enctype="multipart/form-data"> 
  {% csrf_token %}
  头像: <input type="file" name="head-pic">
  用户名: <input type="text" name="username">
  <input type="submit">
</form>

ajax上传文件

var formdata = new FormData();    // ajax上传文件的时候，需要这个类型，它会将添加给它的键值对加工成formdata的类型
formdata.append('user',$('#username').val())    // #添加键值的方法是append，注意写法，键和值之间是逗号
formdata.append('csrfmiddlewaretoken',$('#csrfmiddlewaretoken').val())
formdata.append('file',$('#file')[0].files[0])
$.ajax({
	url:'/upload/',
	type:'post',
	data:formdata,    // 将添加好数据的formdata放到data这里
	processData: false ,   // 不处理数据
	contentType: false,    // 不设置内容类型
	success:function(response){
		response
	}
})

view处理上传的文件

from django.shortcuts import render, HttpResponse
from ajaxtext import settings  # 自己项目的配置
import os
# from django.conf import settings      # django 默认的全局配置


def upload(request):
    if request.method == 'GET':
        return render(request, 'upload.html')
    else:
        print(request.POST)  # 拿到的是post请求的数据,但是文件相关数据需要用request.FILES去拿
        print(request.FILES)  # <MultiValueDict: {'head-pic': [<InMemoryUploadedFile: 1.png (image/png)>]}>
        file_obj = request.FILES.get('head-pic')
        print(file_obj)
        file_name = file_obj.name
        path = os.path.join(settings.BASE_DIR, 'statics', 'img', file_name)
        with open(path, 'wb') as f:
            for i in file_obj:
                f.write(i)
            # for chunk in file_obj.chunks():  # 这种可以设置每次读取上传的大小chunk_size
            #    f.write(chunk)

        return HttpResponse('ok')

 

ajax过csrf_token认证的三种方式

$.ajax({
    data: {
    csrfmiddlewaretoken: '{{ csrf_token }}' 
},
});


$.ajax({
    data: {
        "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
},
});


<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
 
headers:{"X-CSRFToken":$.cookie('csrftoken')}, # 其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加
 
})

 

请求头ContentType

---

ContentType指的是请求体的编码类型，常见的类型共有3种：

1. application/x-www-form-urlencoded
   1. 最常见的post提交数据方式，ajax默认也是这个
2. multipart/form-data
   1. 常见的post提交数据方式，主要利用上传文件
   2. ajax上传时候需要加工成formdata类型，用append方法添加数据键值对，将processData和contentType设置false，得到最原始数据 
   3. django需要通过request.FILES.get(file_obj)获得文件数据对象
3. application/json
   1. 用来告诉服务端消息主体是序列化的json字符串
   2. django不能解析contentType值为json的数据格式，需要从原生body里面取值json_dict = json.loads(request.body.decode('utf-8'))