Django的平常-AJAX

時間 2019-11-09

標籤 django 平常 ajax 欄目 Python 简体版

原文原文鏈接

目錄html

Django的平常-AJAX

Django的平常-AJAX

AJAX簡介

首先AJAX是一種無需從新加載整個網頁的前提下,可以更新部分網頁的技術,他並非一種新的編程語言,而是一種使用現有標準的新方法,是基於原生JavaScript開發的,他能夠用於建立快速動態網頁.前端

AJAX最大的特色就是局部刷新以及異步提交,局部刷新,顧名思義就是能夠在不刷新整個頁面的狀況下局部刷新,而異步提交就是提交任務以後不須要原地等待任務的返回值,能夠繼續向下運行,以後經過回調函數來接收到以前提交任務的返回值,效率很是高.python

本文並非從JS來對AJAX作說明,而是從一個相對簡單的角度,結合AJAX和jQuery的用法,能夠大大簡化AJAX自己的代碼量,並實現更多的功能,下面咱們經過一個實例來講明AJAX和jQuery結合的具體用法.jquery

AJAX與JQ的一個實例

題目以下:寫一個前端頁面,頁面上有兩個輸入框,在第一個輸入框裏面輸入一個計算式,在第二個輸入框裏面顯示其結果,注意,頁面不能夠刷新,即不能經過直接賦值刷新頁面的方式來作,如今咱們就回憶一下怎樣從零開始建立一個Django項目,而後一步一步完成這個需求ajax

# 首先,建立一個Django項目,注意,目錄名不要帶中文,這裏咱們定義項目名爲task,第一個應用名爲app01
# 而後,在task/urls.py裏面寫入
# task/urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', views.home),
]

寫好路由以後,咱們去views.py裏面寫方法django

# app01/views.py
def home(request):
    if request.is_ajax():# 這裏判斷請求類型是不是AJAX的類型
        if request.method == 'POST':# 判斷請求method是不是POST
            t1 = request.POST.get('t1')# 兩個判斷都經過的話,取請求的t1的value值,t1是在前端home.html裏面起的別名,第一個輸入框的id爲t1
            t1 = eval(t1)   # 去引號,由於從前端傳過來的是字符串,不能作運算,去引號以後就會變成一個計算式,把計算式直接傳給前端就能夠計算
            return HttpResponse(t1)
    return render(request, 'home.html')

而後,咱們去templates文件夾下新建一個html文件,命名爲home.html,固然,咱們要先在頭部<head>裏導入jQuery編程

# templates/home.html
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"
</script>
</head>
<body>
計算式
<br>
<input type="text" id="t1">//這裏定義一個輸入框,用來輸入計算式
<button id="b1">計算</button>//按鈕,最簡單的就是最實用的,咱們能夠給一個空白的按鈕綁定不少咱們須要的功能,這裏id設爲b1,方便下面AJAX調用

<br>
結果
<br>
<input type="text" id="t2">//定義第二個輸入框,用來顯示獲得的結果

<script>//下面就是AJAX和jQuery的結合使用
    $('#b1').on('click', function () {//給按鈕綁定一個點擊事件,b1是上面定義的button的id
        $.ajax({    //下面就是AJAX須要的參數
            
            // 1.向後端地址發數據,不寫默認就是朝當前地址提交
            url: '',
            
            // 2.發送的請求,經常使用的就是post或get
            type: 'post',
            
            // 3.發送數據的內容
            data: {'t1':$('#t1').val()},
                
            // 4.異步提交的任務 須要經過回調函數來處理,即success就是回調函數,用來接收從後端返回的數據,並作處理
            success: function (data) { //這裏data就是後端發給前端的異步提交的返回結果
                {#alert(data);#}
                $('#t2').val(data) //這裏給t2輸入框賦值,t2是上面給第二個輸入框定義的id
            }
        })
    })
</script>
</body>

上面三個文件都寫完以後,執行整個項目,就能夠獲得咱們想要的頁面以及功能啦.json

AJAX與contentType

contentType,英譯爲內容類型,消息類型,這裏也是AJAX的參數之一,其主要做用是前端告訴後端其發送的數據的格式類型.後端

咱們知道form表單提交的數據默認格式是urlencoded,這種類型的特色是什麼呢?以下:瀏覽器

username=hello&password=123&age=12就是這種,以鍵值對的形式,並以&鏈接起來的方式,就是urlencoded格式的數據,而且django後端會對這種數據格式的數據進行解析,將結果打包放在request.POST裏面,咱們只須要從request.POST裏面就能夠獲得咱們想要的全部信息.

固然咱們知道form表單還有另一種編碼格式,就是formdata,定義方式爲:

<form action="" enctype="multipart/form-data"></form>,該格式相對於urlencoded不一樣的地方在於,他不只能夠傳平時的數據,還能夠用來傳文件,但有區別的是,django後端對於formdata的格式類型解析以後,文件類型的數據不會放在request.POST裏面,而是放在request.FILES裏面,因此咱們取數據的時候要注意.

AJAX的默認數據類型其實就是urlencoded格式.

AJAX傳json格式

json格式咱們都知道,是一種跨平臺特別好的數據格式,由於幾乎全部語言都會寫對接json格式數據的方法,因此跨平臺的時候基本都會選擇json格式來傳輸數據,並且,django後端針對json格式的數據不會自動解析,會原封不動的放在request.body裏面,這樣咱們能夠原模原樣手動取到前端發的數據,沒必要懼怕數據丟失和失真,那麼咱們使用AJAX怎麼把數據格式變成json格式並傳輸的呢?方法以下:

# home.html
<script>
    $('#b1').on('click',function () {
        $.ajax({
            url:'',  
            type:'post', 
            // 1. 告訴後端你當前的數據格式 究竟是什麼類型,由於咱們要轉換成json數據,因此就告訴後端咱們發的就是json格式數據
            contentType:'application/json',
            // 2. 這裏纔是真正的把要傳到後端的數據轉成json格式,關鍵字爲JSON.stringify({})
            data:JSON.stringify({'username':'jason','password':'123'}),

            success:function (data) {  
                alert(data)
            }
        })
    })
</script>

# 後端在處理json數據的時候,經常使用如下格式
# views.py
import json
def home(request):
     if request.method == 'POST':
        json_bytes = request.body   # 這裏從request.body裏面拿出json格式的數據
        json_str = str(json_bytes,encoding='utf-8')# 將json格式的數據轉換成str字符串類型
        json_dict = json.loads(json_str)    # 對字符串的數據反序列化,獲得真正的json的大字典
        print(json_dict,type(json_dict))
    return render(request,'index.html')

AJAX傳文件

咱們知道form表單傳輸文件的話須要用multipart/form-data格式,那麼AJAX若是須要傳輸文件,也是很是類似的東西,須要用到內置對象Formdata,這個內置對象很是強大,能夠傳普通的鍵值,也能夠傳文件,下面咱們就以Formdata爲例來看看AJAX的代碼怎麼寫

# home.html

<input type="file" name="myfile" id="t3">
<script>
$('#b1').on('click',function(){
    //1. 生成一個FormData對象,方便後面操做
    var myFormData = new FormData();
    //2. 向生成的對象裏面添加普通值
    myFormData.append($("#t1").val());
    //3. 向生成的對象裏面添加文件,其實這裏是三步,合併成了一步
        //(1).要先經過jQuery查找到該文件的標籤
        //(2).而後把jQuery對象轉換成js對象
        //(3).利用原生js對象的方法,直接取到文件的內容
    myFormData.append("myfile",$("#t3")[0].files[0]);
    $.ajax({
            url:'',
            type:'post',
            data:myFormData,  // 直接把前面定義的myFormData對象給data便可
            // ajax傳文件的時候,必定要指定兩個關鍵性的參數
            contentType:false,  // 不用任何編碼,由於formdata對象自帶編碼
            processData:false,  // 告訴瀏覽器不要處理個人數據,直接發給後端就行
            success:function (data) {
                alert(data)
            }
        })
    
})
</script>