django ajax

時間 2019-11-08

標籤 django ajax 欄目 Python 简体版

原文原文鏈接

AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步的Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。css

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

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

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

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

AJAX常見應用情景

搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。django

還有一個很重要的應用場景就是註冊時候的用戶名的查重。編程

其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，而後服務器會把查詢到的結果響應給瀏覽器，最後再把後端返回的結果展現出來。後端

整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！
當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！

當輸入用戶名後，把光標移動到其餘表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名爲lemontree7777777的用戶是否存在，最終服務器返回true表示名爲lemontree7777777的用戶已經存在了，瀏覽器在獲得結果後顯示「用戶名已被註冊！」。瀏覽器

整個過程當中頁面沒有刷新，只是局部刷新了；
在請求發出後，瀏覽器不用等待服務器響應結果就能夠進行其餘操做；

AJAX的優缺點

優勢：

AJAX使用JavaScript技術向服務器發送異步請求；
AJAX請求無須刷新整個頁面；
由於服務器響應內容再也不是整個頁面，而是頁面中的部份內容，因此AJAX性能高；

jQuery實現的AJAX

最基本的jQuery發送AJAX請求示例：服務器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ajax test</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="ajaxTest">AJAX 測試</button>
<script>
  $("#ajaxTest").click(function () {
    $.ajax({
      url: "/ajax_test/",
      type: "POST",
      data: {username: "Q1mi", password: 123456},
      success: function (data) {
        alert(data)
      }
    })
  })
</script>
</body>
</html>

views.py

def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")

$.ajax參數

data參數中的鍵值對，若是值值不爲字符串，須要將其轉換成字符串類型。cookie

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

AJAX請求如何設置csrf_token

方式1

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

經過獲取隱藏的input標籤中的csrfmiddlewaretoken值，放置在data中發送。

方式2

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

經過獲取返回的cookie中的字符串放置在請求頭中發送。注意：須要引入一個jquery.cookie.js插件。

注意：

若是使用從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

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)
    }
  })
})