django中使用Ajax

內容：

1.Ajax原理與基本使用

2.Ajax發送get請求

3.Ajax發送post請求

4.Ajax上傳文件

5.Ajax設置csrf_token

6.django序列化

 

參考：http://www.javashuo.com/article/p-rllqowht-k.html

 

1.Ajax原理與基本使用

關於Ajax的原理及其基本使用，直接看這篇博文便可：http://www.javashuo.com/article/p-phjoqrdl-cd.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 + i2
11     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 + i2
9     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中獲取csrftoken
18 var csrftoken = getCookie('csrftoken');
19 
20 function csrfSafeMethod(method) {
21   // these HTTP methods do not require CSRF protection
22   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_cookie
2 
3 @ensure_csrf_cookie
4 def login(request):
5     pass

 

 

6.django序列化

(1)什麼是序列化

序列化：將字符串轉換成json格式的數據便於後端將數據發送給前端處理

 

(2)django序列化

使用django內置的serializers進行序列化：

1 from django.core import serializers
2 
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)