django中使用Ajax

内容：

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：

 # Ajax get请求的后端处理函数
 def ajax_add(request):
     print(request.GET)
     print(request.GET.get("i1"))
     print(request.GET.get("i2"))

     i1 = int(request.GET.get("i1"))
     i2 = int(request.GET.get("i2"))

     ret = i1 + i2
     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：

 # Ajax post请求的后端处理函数
 def ajax_add3(request):
     print(request.POST)
     print("-" * 120)
     i1 = int(request.POST.get("i1"))
     i2 = int(request.POST.get("i2"))

     ret = i1 + i2
     return HttpResponse(ret)

前端代码：

 <input type="text" id="i1">+
 <input type="text" id="i2">=
 <input type="text" id="i3">
 <input type="button" value="AJAX post提交" id="b3">

 <script src="/static/jquery-3.3.1.js"></script>
 <script src="/static/setupajax.js"></script>
 <script>
     $("#b3").on("click", function () {
         var i1 = $("#i1").val()
         var i2 = $("#i2").val()
         // 往后端发数据
         $.ajax({
             url: "/ajax_add3/",
             type: "post",
             data: {"i1": i1, "i2": i2},
             success: function (arg) {
                 {#alert(arg);#}
                 // 把返回的结果填充到 id是i3的input框中
                 $("#i3").val(arg)
             }
         })
     })
 </script>

4.Ajax上传文件

 // 上传文件示例
 $("#b1").click(function () {
     var formData = new FormData();
     formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
   formData.append("f1", $("#f1")[0].files[0]);
     $.ajax({
         url: "/upload/",
         type: "POST",
         processData: false,  // 告诉jQuery不要去处理发送的数据
         contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
         data: formData,
         success:function (data) {
             console.log(data)
     }
   })
 })

5.Ajax设置csrf_token

(1)通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送

 $.ajax({
   url: "/cookie_ajax/",
   type: "POST",
   data: {
     "username": "xxx",
     "password": 123456,
     // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
     "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
   },
   success: function (data) {
     console.log(data)
   }
 })

(2)通过获取返回的cookie中的字符串 放置在请求头中发送

 // 引入一个jquery.cookie.js插件，然后写以下代码:

 $.ajax({
   url: "/cookie_ajax/",
   type: "POST",
   // 从Cookie取csrftoken，并设置到请求头中
   headers: {"X-CSRFToken": $.cookie('csrftoken')},
   data: {"username": "xxx", "password": 123456},
   success: function (data) {
     console.log(data);
   }
 })

或者这样(推荐这样写)：

 function getCookie(name) {
     var cookieValue = null;
     if (document.cookie && document.cookie !== '') {
         var cookies = document.cookie.split(';');
         for (var i = 0; i < cookies.length; i++) {
             var cookie = jQuery.trim(cookies[i]);
             // Does this cookie string begin with the name we want?
             if (cookie.substring(0, name.length + 1) === (name + '=')) {
                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                 break;
             }
         }
     }
     return cookieValue;
 }

 // 在cookie中获取csrftoken
 var csrftoken = getCookie('csrftoken');

 function csrfSafeMethod(method) {
   // these HTTP methods do not require CSRF protection
   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
 }

 // 为每次Ajax请求之前执行该函数
 // 只要在使用Ajax的地方之前导入即可
 $.ajaxSetup({
   beforeSend: function (xhr, settings) {
     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
       xhr.setRequestHeader("X-CSRFToken", csrftoken);
     }
   }
 });

注：

如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。

如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。

这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie：

 django.views.decorators.csrf import ensure_csrf_cookie

 @ensure_csrf_cookie
 def login(request):
     pass

6.django序列化

(1)什么是序列化

序列化：将字符串转换成json格式的数据便于后端将数据发送给前端处理

(2)django序列化

使用django内置的serializers进行序列化：

 from django.core import serializers

 def books_json(request):
     book_list = models.Book.objects.all()[0:10]
     ret = serializers.serialize("json", book_list)
     return HttpResponse(ret)