django AJAX 的應用

時間  2019-11-26
標籤 django ajax 應用 欄目 Python 简体版
原文   原文鏈接

目錄javascript

AJAX 的使用

AJAX簡介

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

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

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

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

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


#就是使用js的技術發請求和接收響應的。
AJAX特色：
1. 異步
2. 局部刷新
3. 傳輸的數據量少
  • 頁面輸入兩個整數，經過AJAX傳輸到後端計算出結果並返回。
  • views.py文件
from django.shortcuts import render
from django.http import JsonResponse

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
from django.conf.urls import url
from app01 import views

urlpatterns = [
    ...
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),
    ...   
]
  • views.ajax_demo1.heml
<!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.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>

AJAX常見應用情景

搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。
還有一個很重要的應用場景就是註冊時候的用戶名的查重。

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

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

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

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

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參數中的鍵值對，若是值值不爲字符串，須要將其轉換成字符串類型。
$("#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);
      }
    })
  })

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

  • jqery發ajax請求

/* jq發ajax 
導入jq
$.ajax({
        url：發送的地址，
        type:   請求方式，
        data:  {},   
        successs: funcation(res){    res  ——>響應體
        }
}) */

$.ajax({
    url: '/calc/',
    type: 'post',
    data: {
        a: $("[name='i1']").val(),
        b: $("[name='i2']").val(),
    },
    success: function (res) {
        $("[name='i3']").val(res)
    },
    error:function (error) {
        console.log(error)
    }
})

AJAX請求如何設置csrf_token

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

//前提條件：確保有csrftoken的cookie
//在頁面中使用{% csrf_token %}
//加裝飾器 ensure_csrf_cookie
//from django.views.decorators.csrf import csrf_exempt,csrf_protect,  ensure_csrf_cookie

$.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中的字符串 放置在請求頭中發送。

  • 注意：須要引入一個jquery.cookie.js插件。
$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 從Cookie取csrftoken，並設置到請求頭中
  data: {"username": "Q1mi", "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

Form表單上傳文件

#html
<form action="/upload/" method="post" enctype="multipart/form-data"> 
  {% csrf_token %}
  頭像: <input type="file" name="head-pic">
  用戶名: <input type="text" name="username">
  <input type="submit">
</form>

#視圖函數
def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        print(request.POST)  #拿到的是post請求的數據,可是文件相關數據須要用request.FILES去拿
        print(request.FILES) #<MultiValueDict: {'head-pic': [<InMemoryUploadedFile: 1.png (image/png)>]}>
        file_obj = request.FILES.get('head-pic')
        print(file_obj)
        file_name = file_obj.name
        # f = open('xx.txt','rb')
        # with open('xx.txt','wb') as f2:
        #     for i in f:
        #         f2.write(i)
        import os
        path = os.path.join(settings.BASE_DIR,'statics','img',file_name)
        with open(path,'wb') as f:
            for i in file_obj:
                f.write(i)
            #for chunk in  file_obj.chunks():
            #    f.write(chunk)
        return HttpResponse('ok')

AJAX上傳文件

/*
上傳文件
var   formobj  = new FormData()
formobj.append(key,  $("#f1")[0].files[0] )
$.ajax({
        url：發送的地址，
        type:   請求方式，
        processData: false;    // 不處理編碼方式
        contentType:false;    //  不處理請求頭
        data: formobj ,   
        successs: funcation(res){    res  ——>響應體}
})
*/

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


// 上傳文件示例二
<input type="file" id="f1">
<button id="b1">上傳 </button>


$('#b1').click(function () {
        var  formobj =  new FormData();

        formobj.append('file',document.getElementById('f1').files[0]);
        // formobj.append('file',$('#f1')[0].files[0]);
        formobj.append('name','alex');

        $.ajax({
            url: '/upload/',
            type: 'post',
            data:formobj ,
            processData:false,  // 
            contentType:false,
            success: function (res) {
                $("[name='i3']").val(res)
            },
        })
    })

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

- 功能介紹
- 在註冊表單中，當用戶填寫了用戶名後，把光標移開後，會自動向服務器發送異步請求。服務器返回這個用戶名是否已經被註冊過。
- #### 案例分析
- 頁面中給出註冊表單；
- 在username input標籤中綁定onblur事件處理函數。
- 當input標籤失去焦點後獲取 username表單字段的值，向服務端發送AJAX請求；
- django的視圖函數中處理該請求，獲取username值，判斷該用戶在數據庫中是否被註冊，若是被註冊了就返回「該用戶已被註冊」，
不然響應「該用戶名能夠註冊」。

  • 解題流程

  • urls.py
from app01 import views
from django.conf.urls import url

urlpatterns = [
    url(r'^login/', views.login),           #登陸測試頁面路由
    url(r'^check_user/', views.check_user), #響應AJAX函數路由
]
  • models.py
from django.db import models
"""
簡單建立一個用戶帳戶信息,用於測試
"""
class User(models.Model):
    username = models.CharField(max_length=32, unique=True)
    pwd = models.CharField(max_length=32, unique=True)
  • views.py 視圖函數
from app01 import models
from django.shortcuts import render
from django.http import JsonResponse

def login(request):
    return render(request, "login.html")#簡單的展現一個登錄頁面

def check_user(request):  #用來處理AJAX請求
    user = request.GET.get("user")  #獲取AJAX get請求的裏的user的值
    if models.User.objects.filter(username=user).exists():#判斷user的值是否在數據庫username字段的值裏
        return JsonResponse({'status': 1, 'msg': '用戶名已存在'})#若是存在返回用戶名已存在的提示信息
    else:
        return JsonResponse({'status': 0, 'msg': '用戶名可使用'})#不然存在返回用戶名可使用的提示信息
  • html 頁面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸</title>
</head>
<body>
    {% csrf_token %}
    <p>
        註冊帳戶<input type="text" id="user"><span id = "s1"></span>
    </p>
    <p>
        註冊密碼<input type="text">
    </p>
    <input type="submit">
    <script src = '/static/jquery.js'></script>
    <script>
         $("#user").blur(function(){
         var user = $(this).val();
         $.ajax({
             url:'/check_user/',
             type:'get',
             data:{
                 'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
                 user:$('#user').val()
             },
             success:function (res) {
                 $('#s1').text(res.msg)
             }
         })
});
    </script>
</body>
</html>
  • 用戶名已存在 執行效果

  • 用戶可使用 執行效果

JSON

  • 什麼是JSON
#在python中來講 json是一個特殊的字符串。 【長的像列表/字典/字符串/數字/真假】
- 用於語言之間的數據轉換
- 給出 序列化 / 收入 反序列化  

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


一種數據交換的格式
python

支持的數據類型：字符串、數字、列表、字典、布爾值、None

轉化：序列化   josn.dumps(python的數據)      josn.dump(python的數據,f)    

          反序列化   josn.loads(json的字符串)      josn.load(json的字符串,f)

js

支持的數據類型：字符串、數字、數組、對象、布爾值、null

轉化：

序列化：JSON.stringfy(js的數據類型)

反序列化：JSON.parse(json的字符串
                
#小知識                
django 中使用 'from django.http.response import JsonResponse' 前端頁面會識別,而且反序列化

  • 合格的json對象

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]　
#外層必須是列表或字典
#json內部包含字符串必需要用雙引號 ""
#外部''

  • 不合格的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;}  // 不能使用函數和日期對象
}

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

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

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

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

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

  • 簡單瞭解XML

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

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

XML和JSON都使用結構化方法來標記數據
#XML
<country>
    <name>中國</name>
    <province>
        <name>臺灣</name>
        <cities>
            <city>臺北</city>
            <city>高雄</city>
        </cities>
    </province>
</country>
#JSON
{
    "name": "中國",
    "province": [ {
        "name": "臺灣",
        "cities": {
            "city": ["臺北", "高雄"]
        }
    }]
}
#由上面的兩端代碼能夠看出，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，而且在數據交換方面，
因爲 JSON 所使用的字符要比 XML 少得多，能夠大大得節約傳輸數據所佔用得帶寬。

Json 序列化時間日期類型的數據的方法

import json
from datetime import datetime
from datetime import date
#對含有日期格式數據的json數據進行轉換
class JsonCustomEncoder(json.JSONEncoder):
    def default(self, field):
        if isinstance(field,datetime):
            return field.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(field,date):
            return field.strftime('%Y-%m-%d')
        else:
            return json.JSONEncoder.default(self,field)
d1 = datetime.now()
dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)

JsonResponse

def index(request):
    d1 = {'name':'gkf'}
    import json
    return HttpResponse(json.dumps(d1))  -- success:function(res){ var a = JSON.parse(res) }
    return HttpResponse(json.dumps(d1),content-type='application/json') --success:function(res){res--自定義對象,不須要本身在反序列化了}
    return JsonResponse(d1)
    d1 = [11,22]  #非字典類型的數據都須要加safe=False
    return JsonResponse(d1,safe=False)

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 結合 AJAX簡單使用

<script src="/static/sweetalert.min.js"></script>
<script>
    $('.btn-danger').click(function () {
        swal({
            title: "確認刪除嗎?",
            text: "一旦刪除，將沒法恢復!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        url: '/del_publisher/' + $(this).attr('del_id') + '/',
                        success: (res) => {
                            if (res.status === 0) {
                                $(this).parent().parent().remove();
                                swal("刪除成功", {
                                    icon: "success",
                                });
                            }
                        }
                    });
                } else {
                    swal("已取消刪除");
                }
            });
    })
</script>
  • view.py 視圖函數
from app01 import models
from django.http.response import JsonResponse

def delete(request,table,pk):
    if hasattr(models,table.capitalize()):
        table_class = getattr(models,table.capitalize())
        table_class.objects.filter(pk=pk).delete()
        return JsonResponse({'status':0})
    else:
        return JsonResponse({'status':1})
  • models.py 表結構
from django.db import models

#出版社
class Publisher(models.Model):
    pid = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32, unique=True)

  • 成功刪除 效果演示(數據庫也刪除此條數據)

  • 取消刪除 效果演示

$(".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教程