『Python Web框架之Django』第幾節: AJAX

時間 2019-12-11

標籤 python web 框架 django 第幾 ajax 欄目 Python 简体版

原文原文鏈接

一. AJAX簡介

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

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

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

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

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

1. AJAX常見應用場景

搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。
註冊時候的用戶名查重。

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

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

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

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

2. AJAX的優勢

優勢：

AJAX使用JavaScript技術向服務器發送異步請求；
AJAX請求無須刷新整個頁面；
由於服務器響應內容再也不是整個頁面，而是頁面中的部份內容，因此AJAX性能高；

二. jQuery實現的AJAX

1. jQuery發送AJAX的請求例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax測試</title>
</head>
<body>

<button id="btn-1">提交</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('#btn-1').click(function(){
        $.ajax({
            url: '/ajax_deal/',
            type: 'post',
            data: {
                username: 'conan',
                password: 'conan',
            },
            success: function(res){
                alert(res)
            }
        })
    })
</script>
</body>
</html>

HTML部分代碼

from django.shortcuts import render, HttpResponse


def ajax_test(request):
    return render(request, 'ajax_test.html')


def ajax_deal(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    print(username, password)
    return HttpResponse('ok')

views.py

urlpatterns = [
    re_path(r'^ajax_test', views.ajax_test),
    re_path(r'^ajax_deal', views.ajax_deal),
]

urls.py

2. AJAX參數

3. 一個簡單的例子

頁面輸入兩個整數, 經過AJAX傳輸到後端計算出結果並返回.後端

HTML部分代碼

views.py

urls.py

三. JS實現AJAX

四. AJAX請求設置csrf_token

五. AJAX上傳文件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。