一.ajax簡介

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

二.異步加載

以知乎爲例，我們沒有輸入驗證碼或者輸入錯誤的驗證碼之後頁面會提示請輸入驗證碼，但是這個時候頁面缺沒有刷新，但是實際上數據已經到後臺進行校驗過了。
其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，然後服務器會把查詢到的結果響應給瀏覽器，最後再把後端返回的結果展示出來。

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

ajax優點：
　　1.AJAX使用JavaScript技術向服務器發送異步請求；
　　2.AJAX請求無須刷新整個頁面；
　　3.因爲服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以AJAX性能高；

寫一個登錄的示例：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>ajax</h1>
<form action="" method="post">
    {% csrf_token %}
    <div>
        用戶名：<input type="text" name="username" id="username">
    </div>
    <div>
        密碼：<input type="password" name="password" id="password">
    </div>
    <div>
        <input type="button" id="btn" value="確認">      #button就是一個單純的按鈕 不會觸發form表單請求
        {# <input type="submit" id="btn" value="確認">#} #submit會提交請求
    </div>
</form>

<script src="{% static 'jquery.js' %}"></script>
<script>
    $('#btn').click(function () {    #綁定事件
        $.ajax({   #jQuery對象調用ajax
            url:"{% url 'app03:login' %}",
            type:'get',
            success:function (res) {
                console.log(res)
            }
        })
    })

</script>
</body>
</html>

後端代碼：

def login(request):

    if request.method == 'GET':
        return render(request,'manytable/login.html')
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('paddword')

        if uname == 'test' and pwd == '123':
            return redirect('app03:show_book')
        else:
            return redirect('app03:login')

這裏後端返回的是一大串字符串：

我們後端返回一個頁面沒有意義，就是一堆的字符串，拿到了這個頁面，怎麼處理，要做什麼事情，我們要根據返回的結果做一些事情纔有意義，後端就需要進行數據的加工：

import json
def login(request):

    if request.method == 'GET':
        return render(request,'manytable/login.html')
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('paddword')
        if uname == 'test' and pwd == '123':
            # return redirect('app03:show_book')
            ret = {'code':0,'success':'/app03/show_book/'}  #需要返回字典數據 
            return HttpResponse(json.dumps(ret)) #這裏需要序列化成json對象 方便前端解析
        else:
            # return redirect('app03:login')
            ret = {'code':1,'fail':'/app03/login/'}
            return HttpResponse(json.dumps(ret))

html文件中：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>ajax</h1>
<form action="" method="post">
    {% csrf_token %}
    <div>
        用戶名：<input type="text" name="username" id="username">
    </div>
    <div>
        密碼：<input type="password" name="password" id="password">
    </div>
    <div>
        <input type="button" id="btn" value="確認">
        {# <input type="submit" id="btn" value="確認">#}
    </div>
</form>

<script src="{% static 'jquery.js' %}"></script>
<script>

    $('#btn').click(function () {
        $.ajax({   
            url:"{% url 'app03:login' %}",  #請求地址
            type:'post',   #請求類型
            data:{      #攜帶的數據
                uname:$('#username').val(),
                pwd:$('#password').val(),
				#這裏需要加上csrf_token的值，不然會forbidden
                csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(), 
            },
            success:function (res) {
                var res_Str = JSON.parse(res); #將json對象解析成前端的object對象
                console.log(res_Str,typeof res_Str);
                if(res_Str['code'] === 0){
                    location.href=res_Str['success'] #前端並沒有重定向的方法 需要用location.href指定一個連接 然後去請求我們後端傳進來的路徑地址
                }else if(res_Str['code'] === 1){
                    location.href=res_Str['fail']
                }
            }
        })
    })

</script>
</body>
</html>

三.局部刷新

實際操作中登錄失敗會提示用戶名密碼失敗，我們上面登錄失敗會再請求login這個頁面，下面實現局部刷新提示一下：

import json
def login(request):

    if request.method == 'GET':
        return render(request,'manytable/login.html')
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('paddword')
        if uname == 'test' and pwd == '123':
            # return redirect('app03:show_book')
            ret = {'code':0,'success':'/app03/show_book/'}
            return HttpResponse(json.dumps(ret))
        else:
            # return redirect('app03:login')
            ret = {'code':1,'fail':'用戶名或密碼錯誤！！'}  #只需要改這裏就行，提示一句話就行。
            return HttpResponse(json.dumps(ret))

前端修改：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>ajax</h1>
<form action="" method="post">
    {% csrf_token %}
    <div>
        用戶名：<input type="text" name="username" id="username">
    </div>
    <div>
        密碼：<input type="password" name="password" id="password">
    </div>
    <div>
        <input type="button" id="btn" value="確認">
        {# <input type="submit" id="btn" value="確認">#}
    </div>
    <span style="color: red;font-size: 16px" id="error"></span>  #增加一個標籤，後端傳遞過來的信息添加到這裏來
</form>

<script src="{% static 'jquery.js' %}"></script>
<script>

    $('#btn').click(function () {
        $.ajax({
            url:"{% url 'app03:login' %}",
            type:'post',
            data:{
                uname:$('#username').val(),
                pwd:$('#password').val(),
                csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
            },
            success:function (res) {
                var res_Str = JSON.parse(res);
                console.log(res_Str,typeof res_Str);
                if(res_Str['code'] === 0){
                    location.href=res_Str['success']
                }else if(res_Str['code'] === 1){
                    $('span').text(res_Str['fail'])  #給span標籤設置值
                }
            }
        })
    })

</script>
</body>
</html>

結果：

四.csrf_token設置的方法

第一種：

 data:{
     uname:$('#username').val(),
     pwd:$('#password').val(),
     csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
     },

第二種：

data:{
     uname:$('#username').val(),
     pwd:$('#password').val(),
     csrfmiddlewaretoken:{{ csrf_token }},  #模板渲染的方式
    },

五.外部引入ajax

單純寫在js文件中：

$('#btn').click(function () {
        $.ajax({
            url:"/app03/login/",
            //url:"{% url '/app03/login' %}", #js不識別模板語法
            type:'post',
            data:{
                uname:$('#username').val(),
                pwd:$('#password').val(),
                csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
                //csrfmiddlewaretoken:{{ csrf_token }}, #js不識別模板語法
            },
            success:function (res) {
                var res_Str = JSON.parse(res);
                console.log(res_Str,typeof res_Str);
                if(res_Str['code'] === 0){
                    location.href=res_Str['success']
                }else if(res_Str['code'] === 1){
                    $('span').text(res_Str['fail'])
                }
            }
        })
    });

引入ajax：

<script src="{% static 'ajax.js' %}"></script>

前端html中也看不到ajax代碼了：

外部文件導入的方式來寫js代碼,那麼js代碼中不能寫django的模板語法,因爲html文件的加載順序:url–視圖–html模板渲染 — return給瀏覽器 – 瀏覽器渲染 — srcipt的src --纔去請求js文件 --那麼這個js文件的代碼此時才加載到你的html文件中 – 就沒有模板渲染的步驟了 – 就沒有辦法替換對應的模板語法。
視情況而定，如果有大量的模板語法不建議使用外部引入ajax的方法。

Django之ajax

一.ajax簡介

二.異步加載

三.局部刷新

四.csrf_token設置的方法

五.外部引入ajax

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

Django之ORM單表操作

解決VMware Workstation Pro15 無法在Windows上運行

Django初始和url路由機制

Django多表查詢之分組查詢、F查詢、Q查詢

socket之粘包

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結