Django與Ajax

時間  2019-12-02
標籤 django ajax 欄目 Python 简体版
原文   原文鏈接

目錄css

Ajax簡介

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

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

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

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

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

Ajax基本語法結構

$.ajax({
    代碼塊
})

使用Ajax的例子，頁面輸入兩個整數，在不刷新瀏覽器的狀況下傳輸到後端計算出結果ajax

urls.py：
url(r'^ajax_test/', views.ajax_test),
views.py：
from django.shortcuts import render,HttpResponse
# Create your views here.
def ajax_test(request):
    if request.method == 'POST':
        d1 = request.POST.get('d1')
        d2 = request.POST.get('d2')
        d3 = int(d1) + int(d2)
        return HttpResponse(d3)
    return render(request,'ajax_test.html')
ajax_test.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>

<input type="text" id="d1"> + <input type="text" id="d2"> =
<input type="text" id="d3">
<button id="d4">點我發送ajax數據</button>

<script>
    // 重點
    $('#d4').click(function () {
        $.ajax({
            url:'', //數據提交的後端地址，跟form表單的action參數同樣
            type:'post', //提交方式爲post，默認也是get請求
            data:{'d1':$('#d1').val(),'d2':$('#d2').val()}, //提交的數據
            success:function (data) {       //形參data就是異步提交給後端，後端經過計算返回的結果，回調函數
                $('#d3').val(data)      // 回調以後作的事情，設置值。
            }
        })
    })
</script>
</body>
</html>

若是使用了ajax，視圖層的三板斧都不會再與前端頁面交互，而是與回調函數的形參data交互。數據庫

先後端傳輸的編碼格式

發送請求的前端標籤

咱們所學過的向後端發送請求的前端標籤都有哪些？django

  • a標籤： get請求，get請求也能夠攜帶參數，?xxx=111&yyy=222
  • form表單：get/post請求
  • ajax：get/post請求

針對這些前端發送post請求的咱們來研究一下它們的數據在前端的編碼格式：編程

前端交互是一個數據編碼格式，針對不一樣的數據，後端會進行不一樣的處理。json

好比說django後端有

  • request.POST
  • request.FILES

那麼爲何只要是POST請求，就會交給request.POST進行處理，若是是文件請求，就會交給request.FILES進行處理，咱們帶着這些疑問來往下看。

前端三種數據格式

在前端吶，有三種數據格式：

  1. urlencoded
  2. formdata
  3. application/json

針對上面所學過的向後端發送請求的前端標籤來看

form表單發送三種數據格式的狀況

form表單只可以發送兩種數據格式的數據：1和2

1.form表單post請求默認的編碼格式是urlencoded

在瀏覽器-->檢查-->network能夠看到，咱們form表單在提交數據的時候，有以下信息

Request Headers：    # 請求頭
Content-Type:application/x-www-form-urlencoded; charset=UTF-8   # 數據編碼格式-urlencoded

Form Data：# 攜帶的數據
d1=232323&d2=23232132

在咱們後端django中針對urlencoded數據，會自動解析並封裝到request.POST方法中。

2.form表單若是發送文件

Request Headers：    # 請求頭
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ  # 數據編碼格式，-form-data

Form Data：#針對form-data格式的數據，在瀏覽器是沒法查看的。

發送到後端django，文件對象會自動解析到 request.POST 和 request.FILES 中，前者記錄文件名，後者記錄對象。

3.form表單沒法發送json格式的數據，若是發的話，只能藉助於ajax

ajax三種編碼格式都可以發送

ajax可以發送三種數據格式的數據：一、2和3

1.ajax默認的編碼格式也是urlencoded，django後端也是將數據封裝到request.POST中

那麼咱們剛纔看了form表單發送這些默認編碼格式的數據，還有一個發送json格式的須要藉助於ajax，請繼續往下看

2.Ajax傳輸json格式數據

urls.py：
url(r'^form_test/', views.form_test),
views.py：
def form_test(request):
    if request.method == "POST":
        print(request.body)
        json_bytes = request.body
        print(json.loads(json_bytes),type(json.loads(json_bytes)))
        # 反序列化爲python字典格式
    return render(request,'form_test.html')

打印結果：
b'{"username":"qinyj","pwd":123}'   # request.body
{'username': 'qinyj', 'pwd': 123} <class 'dict'>    # 反序列化以後的
form_test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>

<form action="" method="post">

    username: <input type="text" name="username" id="d1">
    password: <input type="text" name="password" id="d2">
    # 這裏不要用form表單的提交，爲何呢，由於form表單提交的默認數據編碼格式是urlencoded，也會將json格式的數據封裝到後端request.body中
</form>
<button id="d3">點我發送json格式</button>

<script>
    $('#d3').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json', //須要指定編碼格式爲json
            data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 須要前端發送JSON字符串，JSON。stringify序列化便可。
            success:function (data) {
                alert(123)      // 此彈框僅僅演示，沒有任何用戶
            }
        })
    })
</script>
</body>
</html>

django後端針對前端json格式的數據，不會作任何處理，數據怎麼來的，原封不動的封裝到request.body中（基於網絡傳輸二進制的json字符串），須要本身處理格式

3.Ajax傳輸文件數據

views.py：

def form_test(request):
    if request.method == "POST":
        print(request.POST)
        print(request.FILES)
        # 前端上傳文件以後打印結果
        # < QueryDict: {'username': ['qinyj']} >
        # < MultiValueDict: {'myfile': [ < InMemoryUploadedFile: Devops工具鏈.png(image / png) >]} >
    return render(request,'form_test.html')
form_test.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>

<form action="">
    file: <input type="file" name="file" id="d1">
</form>
<button id="d4">點我發送文件格式的數據</button>

<script>
    $('#d4').click(function () {
        // 先生成一個內置對象
        var MyFormData = new FormData();
        // 添加普通的鍵值對
        MyFormData.append('username','qinyj');
        // 添加文件數據
        MyFormData.append('myfile',$('#d1')[0].files[0]);

        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,
            // 發送文件必需要指定的兩個參數
            contentType:false,  // 不適用任何編碼，MyFormData對象內部自帶編碼，django後端可以識別。
            processData:false,  // 不處理任何數據
            success:function (data) {

            }
        })
    })
</script>
</body>
</html>

django 可以識別前端ajax發送過來的文件對象，並放入對應的方法中request.FILE去解析。

序列化的概念

在前端分離的場景下，發送給前端json格式的字符串形式，再寫上說明文檔，方便數據交互

咱們能夠手動在後端將數據轉成json字符串格式，django很是友好，幫咱們想到了這一點，須要藉助一個模塊來完成。

from django.core import serializers

urls.py：
url(r'^get_data/', views.get_data),
views.py：

# 須要導入模塊
from django.core import serializers
from app01 import models

def get_data(request):
    # 從數據庫中查出來全部的信息，
    # 序列化目的，將數據整合成一個大字典形式，
    user_querset = models.User.objects.all()
    res = serializers.serialize('json',user_querset)
    return HttpResponse(res)

# 前端頁面接收到的json數據：
[{"model": "app01.user", "pk": 1, "fields": {"username": "qinyj", "password": 123, "gender": 1}}, {"model": "app01.user", "pk": 2, "fields": {"username": "jack", "password": 123, "gender": 2}}]

Ajax常見應用場景

搜索框中根據用戶輸入的關鍵字，自動提示檢索關鍵字

用戶的註冊時候的查重

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程