Django學習筆記9

時間  2019-12-10
標籤 django 學習 筆記 欄目 Python 简体版
原文   原文鏈接

AJAX準備知識：JSON

JSON複習

  • JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
  • JSON 是輕量級的文本數據交換格式
  • JSON 獨立於語言 *
  • JSON 具備自我描述性，更易理解
  • JSON 使用 JavaScript 語法來描述數據對象，可是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不一樣的編程語言。

json的具體操做能夠看以往的文章html

AJAX簡介

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

1. 咱們前端日後端發請求的方式：python

  • 直接在地址欄輸入URL
  • a標籤
  • form表單
  • AJAX

2. AJAX特色：jquery

  • 異步
  • 局部刷新（偷偷發請求）
  • 返回時是經過success中（data）來生效，在ajax請求時返回跳轉是無效的

3. AJAX缺點：git

  • 請求零碎，濫用對服務端壓力大

AJAX常見應用情景

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

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

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

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

       

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

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

JS實現AJAX

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=q1mi&password=123456");
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);
      }
    };
  };

AJAX使用實例（Jquery）

將i1和i2兩個文本框中的內容相加，點擊提交，AJAX異步提交給服務器，而後返回和給i3編程

HTML部分代碼

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

views.py

urls.py

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

AJAX請求如何設置csrf_token

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

首先在html文件的from表單中設置{% csrf_token %}，而後會在form表單中自動生成隱藏的input框，而後便可經過下面代碼發送

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

文件上傳

請求頭ContentType

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

第一種：application/x-www-form-urlencoded

這應該是最多見的 POST 提交數據的方式了。瀏覽器的原生

表單，若是不設置 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

第二種：multipart/form-data

這又是一個常見的 POST 數據提交的方式。咱們使用表單上傳文件時，必須讓

表單的 enctype 等於 multipart/form-dat。直接來看一個請求示例： 
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 數據的方式，都是瀏覽器原生支持的，並且現階段標準中原生

表單也只支持這兩種方式（經過 元素的 enctype 屬性指定，默認爲 application/x-www-form-urlencoded。其實 enctype 還支持 text/plain，不過用得很是少）。
隨着愈來愈多的 Web 站點，尤爲是 WebApp，所有使用 Ajax 進行數據交互以後，咱們徹底能夠定義新的數據提交方式，給開發帶來更多便利。

第三種：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上傳文件

XMLHttpRequest 是一個瀏覽器接口，經過它，咱們可使得 Javascript 進行 HTTP (S) 通訊。XMLHttpRequest 在如今瀏覽器中是一種經常使用的先後臺交互數據的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出來了，相對於上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一個對象，利用它來提交表單、模擬表單提交，固然最大的優點就是能夠上傳二進制文件。下面就具體

首先看一下formData的基本用法：FormData對象，能夠把全部表單元素的name與value組成一個queryString，提交到後臺。只須要把 form 表單做爲參數傳入 FormData 構造函數便可：

介紹一下如何利用 FormData 來上傳文件。

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

或者使用

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

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

檢查瀏覽器的請求頭：

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

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

Django內置的serializers

將query_set類型數據轉化爲你想要的數據類型傳給前端

from django.core import 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教程