Django 框架篇(八): Django處理Ajax請求

一. Ajax 簡介:

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。

AJAX 不是新的編程語言，而是一種使用現有標准的新方法。

AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。

• 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
• 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

 

詳情請見: 前端之jQuery 中的Ajax交互方式

 

二. JSON字符串介紹:

定義:

• JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
• JSON 是輕量級的文本數據交換格式
• JSON 獨立於語言 *
• JSON 具有自我描述性，更易理解

 

javascript中  對象 轉化成json字符串的方法: 

JSON.stringify(): 用於將 JavaScript 值轉換為 JSON 字符串。　

JSON.stringify({"name":"alex"})

javascript中  json字符串 轉化成 js對象的方法: 

JSON.parse(): 用於將一個 JSON 字符串轉換為 JavaScript 對象　

JSON.parse('{"name":"alex"}');

 

三. Django處理Ajax的post請求:

正常的Django處理form表單中的post請求:

　　因為django中中間件的保護機制, 需要對請求中的cookie和表單中的  "csrfmiddlewaretoken"  進行匹配,所以需要在頁面中加上 {% csrf_token %} 標簽來進行驗證;

　　而Ajax中的請求不是通過form表單進行發送的, 所以, 就需要想辦法 獲取到  "csrfmiddlewaretoken"  所對應的值, 一起發過去.

 

如何獲取 "csrfmiddlewaretoken"  所對應的值

1. 通過jQuery的屬性選擇器獲取:

　　在這里還需要在html中 加入{% csrf_token %} 標簽

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

 

2. 通過獲取cookie中的 'csrftoken' 在請求頭中添加 "X-CSRFToken" 對應的鍵值對:

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 從Cookie取csrftoken，並設置到請求頭中
  data: {"username": "Q1mi", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

 

3.  自己從新寫一個獲取cookie的js方法:

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;
}
var csrftoken = getCookie('csrftoken');
// 上面是 自定義的 獲取的 csrftoken

-------------------------------------------------------------------------------------

// 下面是更改一下 ajax的初始化配置, 讓每次的 ajax請求都提前添加 cookie的請求頭

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

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

 

 

注意: 

　　以上 方法都必須保證在頁面加載的時候 cookie存在csrftoken的值.

　　如果 html模板中沒有包含 {% csrf_token %} 標簽的話, django將不會設置 cookie;

　　此時可以用  django.views.decorators.csrf  包中的 ensure_csrf_cookie 函數來進行裝飾被訪問的 視圖函數  示例:

from django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def login(request):
    pass

　　官方有關csrf的解釋文檔

 

 

示例: 利用ajax上傳文件:

// 上傳文件示例
$("#b3").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)
    }
  })
})