{Django基礎七之Ajax} 一 Ajax簡介 二 Ajax使用 三 Ajax請求設置csrf_token 四 關於json 五 補充一個SweetAlert插件(瞭解)

時間  2020-05-30
標籤 django 基礎 ajax 簡介 使用 請求 設置 csrf token 關於 json 補充 一個 sweetalert 插件 瞭解 欄目 Python 简体版
原文   原文鏈接
 

{Django基礎七之Ajax} 一 Ajax簡介 二 Ajax使用 三 Ajax請求設置csrf_token 四 關於json 五 補充一個SweetAlert插件(瞭解)

 

Django基礎七之Ajax

 

本節目錄html

一 Ajax簡介

　　1.簡介

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

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

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

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

　　　　　　a.同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；chrome

　　　　　　b.異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。數據庫

 　　AJAX除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程django

 　　2.示例

　　　　頁面輸入兩個整數，經過AJAX傳輸到後端計算出結果並返回。編程

　　　　html文件名稱爲ajax_demo1.html，內容以下json

複製代碼
複製代碼 
<!DOCTYPE html>
<html lang="en">
<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局部刷新實例</title>
</head>
<body>

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

<script src="/static/jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })
</script>
</body>
</html>
複製代碼
複製代碼

　　　　views.py裏面的內容：

複製代碼
複製代碼 
def ajax_demo1(request):
    return render(request, "ajax_demo1.html")


def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)
複製代碼
複製代碼

　　　　urls.py裏面的內容

複製代碼 
urlpatterns = [
    ...
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),
    ...   
]
複製代碼

　　　啓動django項目，而後運行看看效果，頁面不刷新

 

　　3.AJAX常見應用情景

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

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

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

　　　　　　a.整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！

　　　　　　b.當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！

       　　　　

 

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

　　　　a.整個過程當中頁面沒有刷新，只是局部刷新了；

　　　　b.在請求發出後，瀏覽器不用等待服務器響應結果就能夠進行其餘操做；

　　4.AJAX的優缺點

　　　　優勢：

　　　　　　1.AJAX使用JavaScript技術向服務器發送異步請求；

　　　　　　2.AJAX請求無須刷新整個頁面；

　　　　　　3.由於服務器響應內容再也不是整個頁面，而是頁面中的部份內容，因此AJAX性能高；

 

 

二 Ajax的使用

　　1.基於jQuery的實現

　　　　看代碼：

複製代碼
複製代碼 
<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"chao",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>
複製代碼
複製代碼

 

　　2.基於原生js實現

　　　　看代碼

複製代碼
複製代碼 
var b2 = document.getElementById("b2");
  b2.onclick = function () {
    // 原生JS
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("POST", "/ajax_test/", true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.send("username=chao&password=123456");
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);
      }
    };
  };
複製代碼
複製代碼

 

 　　3.Ajax－服務器－Ajax流程圖

　　 　　

 

 

三 Ajax請求設置csrf_token

 

　　方式1

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

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

 

　　方式2（後面再說）

　　　　經過獲取返回的cookie中的字符串 放置在請求頭中發送。

　　　　注意：須要引入一個jquery.cookie.js插件。

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

 

　　　　或者用本身寫一個getCookie方法：

複製代碼
複製代碼 
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');
複製代碼
複製代碼

 

　　　　每一次都這麼寫太麻煩了，可使用$.ajaxSetup()方法爲ajax請求統一設置。

複製代碼
複製代碼 
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的方式，須要確保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
複製代碼

 

　　　　更多細節詳見：Djagno官方文檔中關於CSRF的內容

 

 

四 Ajax文件上傳

 

　　請求頭ContentType

　　　　ContentType指的是請求體的編碼類型，常見的類型共有3種：

　　　　1 application/x-www-form-urlencoded

　　　　　　這應該是最多見的 POST 提交數據的方式了。瀏覽器的原生 <form> 表單，若是不設置 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。請求相似於下面這樣（無關的請求頭在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=yuan&age=22

　　　　2 multipart/form-data

　　　　　　這又是一個常見的 POST 數據提交的方式。咱們使用表單上傳文件時，必須讓 <form> 表單的 enctype 等於 multipart/form-data。直接來看一個請求示例：

複製代碼
複製代碼
複製代碼 
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
複製代碼
複製代碼
複製代碼

　　　　　　這個例子稍微複雜點。首先生成了一個 boundary 用於分割不一樣的字段，爲了不與正文內容重複，boundary 很長很複雜。而後 Content-Type 裏指明瞭數據是以 multipart/form-data 來編碼，本次請求的 boundary 是什麼內容。消息主體裏按照字段個數又分爲多個結構相似的部分，每部分都是以 --boundary 開始，緊接着是內容描述信息，而後是回車，最後是字段具體內容（文本或二進制）。若是傳輸的是文件，還要包含文件名和文件類型信息。消息主體最後以 --boundary-- 標示結束。關於 multipart/form-data 的詳細定義，請前往 rfc1867 查看。

　　　　　　這種方式通常用來上傳文件，各大服務端語言對它也有着良好的支持。

　　　　　　上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支持的，並且現階段標準中原生 <form> 表單也只支持這兩種方式（經過 <form> 元素的 enctype 屬性指定，默認爲 application/x-www-form-urlencoded。其實 enctype 還支持 text/plain，不過用得很是少）。

　　　　　　隨着愈來愈多的 Web 站點，尤爲是 WebApp，所有使用 Ajax 進行數據交互以後，咱們徹底能夠定義新的數據提交方式，給開發帶來更多便利。

　　　　3 application/json

　　　　　　application/json 這個 Content-Type 做爲響應頭你們確定不陌生。實際上，如今愈來愈多的人把它做爲請求頭，用來告訴服務端消息主體是序列化後的 JSON 字符串。因爲 JSON 規範的流行，除了低版本 IE 以外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會趕上什麼麻煩。

　　　　　　JSON 格式支持比鍵值對複雜得多的結構化數據，這一點也頗有用。記得我幾年前作一個項目時，須要提交的數據層次很是深，我就是把數據 JSON 序列化以後來提交的。不過當時我是把 JSON 字符串做爲 val，仍然放在鍵值對裏，以 x-www-form-urlencoded 方式提交。

　　基於form表單的文件上傳 

　　　　模板部分

<form action="" method="post" enctype="multipart/form-data">
      用戶名 <input type="text" name="user">
      頭像 <input type="file" name="avatar">
    <input type="submit">
</form>

　　　　視圖部分

複製代碼
複製代碼
複製代碼 
def index(request):
    print(request.body)   # 原始的請求體數據
    print(request.GET)    # GET請求數據
    print(request.POST)   # POST請求數據
    print(request.FILES)  # 上傳的文件數據


    return render(request,"index.html")
複製代碼
複製代碼
複製代碼

　　基於Ajax的文件上傳

　　　　模板

複製代碼
複製代碼
複製代碼 
<form>
      用戶名 <input type="text" id="user">
      頭像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>

<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData();
        formdata.append("user",$("#user").val());
　　　　 formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val()); #別忘了csrf_token
formdata.append("avatar_img",$("#avatar")[0].files[0]);
        $.ajax({

            url:"",
            type:"post",
            data:formdata,
            processData: false ,    // 不處理數據
            contentType: false,    // 不設置內容類型

            success:function(data){
                console.log(data)
            }
        })

    })

</script>
複製代碼
複製代碼
複製代碼

　　　　　　或者使用

var form = document.getElementById("form1");
var fd = new FormData(form);

　　　　　　這樣也能夠直接經過ajax 的 send() 方法將 fd 發送到後臺。

　　　　　　注意：因爲 FormData 是 XMLHttpRequest Level 2 新增的接口，如今 低於IE10 的IE瀏覽器不支持 FormData。

　　視圖

複製代碼
複製代碼
複製代碼 
def index(request):

    if request.is_ajax():

        print(request.body)   # 原始的請求體數據
        print(request.GET)    # GET請求數據
        print(request.POST)   # POST請求數據
        print(request.FILES)  # 上傳的文件數據

        return HttpResponse("ok")


    return render(request,"index.html")
複製代碼
複製代碼
複製代碼

　　檢查瀏覽器的請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

 

　　練習（用戶名是否已被註冊）

　　　　功能介紹

　　　　　　在註冊表單中，當用戶填寫了用戶名後，把光標移開後，會自動向服務器發送異步請求。服務器返回這個用戶名是否已經被註冊過。

　　　　案例分析

  • 頁面中給出註冊表單；
  • 在username input標籤中綁定onblur事件處理函數。
  • 當input標籤失去焦點後獲取 username表單字段的值，向服務端發送AJAX請求；
  • django的視圖函數中處理該請求，獲取username值，判斷該用戶在數據庫中是否被註冊，若是被註冊了就返回「該用戶已被註冊」，不然響應「該用戶名能夠註冊」。

 

 

五 關於json

　　1.什麼是json

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

　　　　* JSON 使用 JavaScript 語法來描述數據對象，可是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不一樣的編程語言。

 　　　　啥都別多說了，上圖吧！

 

　　　　合格的json對象：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]　

　　　　不合格的json對象：

複製代碼
複製代碼
複製代碼 
{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號
[32, 64, 128, 0xFFF] // 不能使用十六進制值
{ "name": "張三", "age": undefined }  // 不能使用undefined
{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函數和日期對象
}
複製代碼
複製代碼
複製代碼

　　　　看一下普通字符串和json字符串，在進行序列化的時候的區別

複製代碼 
import json
# s = "{'name':'chao','age':18}" #普通字符串
s = '{"name":"chao","age":18}'   #json字符串，裏面必須是雙引號
ret = json.loads(s)
print(ret)
print(ret['name'])
複製代碼

 

　　2.js的stringify與parse方法

　　　　JavaScript中關於JSON對象和字符串轉換的兩個方法：

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

JSON.parse('{"name":"chao"}');
JSON.parse('{name:"chao"}') ;   // 錯誤
JSON.parse('[18,undefined]') ;   // 錯誤

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

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

　　3.和XML的比較

　　　　JSON 格式於2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。

　　　　JSON 格式有兩個顯著的優勢：書寫簡單，一目瞭然；符合 JavaScript 原生語法，能夠由解釋引擎直接處理，不用另外添加解析代碼。因此，JSON迅速被接受，已經成爲各大網站交換數據的標準格式，並被寫入ECMAScript 5，成爲標準的一部分。

　　　　XML和JSON都使用結構化方法來標記數據，下面來作一個簡單的比較。

　　　　用XML表示中國部分省市數據以下：

  xml數據

　　　　用JSON表示以下：

  json數據

　　　　由上面的兩端代碼能夠看出，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，而且在數據交換方面，因爲 JSON 所使用的字符要比 XML 少得多，能夠大大得節約傳輸數據所佔用得帶寬。 

 4.ajax和服務端的數據交互時的序列化問題

　　當咱們給ajax回覆的不是一個字符串，而是其餘數據類型的時候，須要咱們將數據轉換爲json字符串進行發送，這樣好配合js進行json字符串的處理，否則發送或者接受的是普通字符串的話，沒辦法處理成原來的數據類型。

　　這就用到了咱們前面的視圖函數中那個JsonResponse了，看博客，裏面response的部分

　　還要注意ajax中的data參數：

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

複製代碼
複製代碼 
$("#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);
      }
    })
  })
複製代碼
複製代碼

 

　　5.Django內置的serializers作序列化

　　　　看代碼：

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

 

 

六 補充一個SweetAlert插件示例

 看效果：

　　　　

 

　　點擊下載Bootstrap-sweetalert項目。

複製代碼
複製代碼 
$(".btn-danger").on("click", function () {
  swal({
    title: "你肯定要刪除嗎？",
    text: "刪除可就找不回來了哦！",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "btn-danger",
    confirmButtonText: "刪除",
    cancelButtonText: "取消",
    closeOnConfirm: false
    },
    function () {
      var deleteId = $(this).parent().parent().attr("data_id");
      $.ajax({
        url: "/delete_book/",
        type: "post",
        data: {"id": deleteId},
        success: function (data) {
          if (data.status === 1) {
            swal("刪除成功!", "你能夠準備跑路了！", "success");
          } else {
            swal("刪除失敗", "你能夠再嘗試一下！", "error")
          }
        }
      })
    });
})
 
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程