内容：
1.Ajax原理与基本使用
2.Ajax发送get请求
3.Ajax发送post请求
4.Ajax上传文件
5.Ajax设置csrf_token
6.django序列化
参考：https://www.cnblogs.com/liwenzhou/p/8718861.html
1.Ajax原理与基本使用
关于Ajax的原理及其基本使用，直接看这篇博文即可：https://www.cnblogs.com/wyb666/p/9387488.html
2.Ajax发送get请求
views.py：
1 # Ajax get请求的后端处理函数 2 def ajax_add(request): 3 ????print(request.GET) 4 ????print(request.GET.get("i1")) 5 ????print(request.GET.get("i2")) 6 ?7 ????i1 = int(request.GET.get("i1")) 8 ????i2 = int(request.GET.get("i2")) 9 10 ????ret = i1 + i211 ????return HttpResponse(ret)前端代码：
1 <input type="text" id="i1">+ 2 <input type="text" id="i2">= 3 <input type="text" id="i3"> 4 <input type="button" value="AJAX get提交" id="b1"> 5 ?6 <script src="/static/jquery-3.3.1.js"></script> 7 <script> 8 ????$("#b1").on("click", function () { 9 ????????var i1 = $("#i1").val()10 ????????var i2 = $("#i2").val()11 ????????// 往后端发数据12 ????????$.ajax({13 ????????????url: "/ajax_add/",14 ????????????type: "get",15 ????????????data: {"i1": i1, "i2": i2},16 ????????????success: function (arg) {17 ????????????????{#alert(arg);#}18 ????????????????// 把返回的结果填充到 id是i3的input框中19 ????????????????$("#i3").val(arg)20 ????????????}21 ????????})22 ????})23 </script>3.Ajax发送post请求
views.py：
1 # Ajax post请求的后端处理函数2 def ajax_add3(request):3 ????print(request.POST)4 ????print("-" * 120)5 ????i1 = int(request.POST.get("i1"))6 ????i2 = int(request.POST.get("i2"))7 8 ????ret = i1 + i29 ????return HttpResponse(ret)前端代码：
1 <input type="text" id="i1">+ 2 <input type="text" id="i2">= 3 <input type="text" id="i3"> 4 <input type="button" value="AJAX post提交" id="b3"> 5 ?6 <script src="/static/jquery-3.3.1.js"></script> 7 <script src="/static/setupajax.js"></script> 8 <script> 9 ????$("#b3").on("click", function () {10 ????????var i1 = $("#i1").val()11 ????????var i2 = $("#i2").val()12 ????????// 往后端发数据13 ????????$.ajax({14 ????????????url: "/ajax_add3/",15 ????????????type: "post",16 ????????????data: {"i1": i1, "i2": i2},17 ????????????success: function (arg) {18 ????????????????{#alert(arg);#}19 ????????????????// 把返回的结果填充到 id是i3的input框中20 ????????????????$("#i3").val(arg)21 ????????????}22 ????????})23 ????})24 </script>4.Ajax上传文件
1 // 上传文件示例 2 $("#b1").click(function () { 3 ????var formData = new FormData(); 4 ????formData.append("csrfmiddlewaretoken", $("[name=‘csrfmiddlewaretoken‘]").val()); 5 ??formData.append("f1", $("#f1")[0].files[0]); 6 ????$.ajax({ 7 ????????url: "/upload/", 8 ????????type: "POST", 9 ????????processData: false, ?// 告诉jQuery不要去处理发送的数据10 ????????contentType: false, ?// 告诉jQuery不要去设置Content-Type请求头11 ????????data: formData,12 ????????success:function (data) {13 ????????????console.log(data)14 ????}15 ??})16 })5.Ajax设置csrf_token
(1)通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送
1 $.ajax({ 2 ??url: "/cookie_ajax/", 3 ??type: "POST", 4 ??data: { 5 ????"username": "xxx", 6 ????"password": 123456, 7 ????// 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中 8 ????"csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val() ?9 ??},10 ??success: function (data) {11 ????console.log(data)12 ??}13 })(2)通过获取返回的cookie中的字符串 放置在请求头中发送
1 // 引入一个jquery.cookie.js插件，然后写以下代码: 2 ?3 $.ajax({ 4 ??url: "/cookie_ajax/", 5 ??type: "POST", 6 ??// 从Cookie取csrftoken，并设置到请求头中 7 ??headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)}, ????8 ??data: {"username": "xxx", "password": 123456}, 9 ??success: function (data) {10 ????console.log(data);11 ??}12 })或者这样(推荐这样写)：
1 function getCookie(name) { 2 ????var cookieValue = null; 3 ????if (document.cookie && document.cookie !== ‘‘) { 4 ????????var cookies = document.cookie.split(‘;‘); 5 ????????for (var i = 0; i < cookies.length; i++) { 6 ????????????var cookie = jQuery.trim(cookies[i]); 7 ????????????// Does this cookie string begin with the name we want? 8 ????????????if (cookie.substring(0, name.length + 1) === (name + ‘=‘)) { 9 ????????????????cookieValue = decodeURIComponent(cookie.substring(name.length + 1));10 ????????????????break;11 ????????????}12 ????????}13 ????}14 ????return cookieValue;15 }16 17 // 在cookie中获取csrftoken18 var csrftoken = getCookie(‘csrftoken‘);19 20 function csrfSafeMethod(method) {21 ??// these HTTP methods do not require CSRF protection22 ??return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));23 }24 25 // 为每次Ajax请求之前执行该函数26 // 只要在使用Ajax的地方之前导入即可27 $.ajaxSetup({28 ??beforeSend: function (xhr, settings) {29 ????if (!csrfSafeMethod(settings.type) && !this.crossDomain) {30 ??????xhr.setRequestHeader("X-CSRFToken", csrftoken);31 ????}32 ??}33 });注：
如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。
如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie：
1 django.views.decorators.csrf import ensure_csrf_cookie2 3 @ensure_csrf_cookie4 def login(request):5 ????pass
6.django序列化
(1)什么是序列化
序列化：将字符串转换成json格式的数据便于后端将数据发送给前端处理
(2)django序列化
使用django内置的serializers进行序列化：
1 from django.core import serializers2 3 def books_json(request):4 ????book_list = models.Book.objects.all()[0:10]5 ????ret = serializers.serialize("json", book_list)6 ????return HttpResponse(ret)django中使用Ajax
原文地址：https://www.cnblogs.com/wyb666/p/9688670.html